Anchors animation in QML

import QtQuick 2.0

Rectangle {
    width: 360; height: 360;
    color: "grey"
    Text {
        anchors.centerIn: parent
        text: "MAIN VIEW"
    }

    Item {
        id: fakeLeftPanel
        anchors {
            top: parent.top
            bottom: parent.bottom
            right: parent.left
        }
        height: leftPanel.height
        width: leftPanel.width
    }

    Rectangle {
        id: leftPanel
        width: 50
        color: "green"
        anchors {
            top: parent.top
            bottom: parent.bottom
        }
        Text {
            anchors.centerIn: parent
            text: "PANEL"
        }
        state: "show"

        states: [ State {
                name: "show"
                AnchorChanges { target: leftPanel; anchors.left: parent.left }
            },
            State {
                name: "hide"
                AnchorChanges { target: leftPanel; anchors.left: fakeLeftPanel.left }
            } ]
        transitions: Transition {
            AnchorAnimation { duration: 200 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            leftPanel.state = (leftPanel.state === "show")
                    ? "hide"
                    : "show"
        }
    }
}