qml States and Transitions

Rectangle {
    id: myRect; width: 640; height: 400; state: "OldState"
    Rectangle { id: movingRect; width: 60; height: 60; color: "red"
        MouseArea { anchors.fill: parent; 
                    onClicked: if (myRect.state == "OldState") myRect.state = "NewState"; 
                               else myRect.state = "OldState" }
    }
    states: [
        State {
            name: "NewState"
            PropertyChanges { target: movingRect; x: 580; y: 340; radius: 30; color: "green" }
        }
    ]
    transitions: [
        Transition {
            from: "OldState"; to: "NewState"
            PropertyAnimation { properties: "x,y,color,radius"; duration: 1000 }
        },
        Transition {
            from: "NewState"; to: "OldState"
            PropertyAnimation { properties: "x,y,color,radius"; duration: 1000 }
        }
    ]
}