Anchor Animation doesn't preserve margin while animating.

import QtQuick 2.0

Item {
    id: root

    width: 1024
    height: 600

    Rectangle {
        id: redRect
        width: 200
        height: 200
        color: "red"
    }

    Rectangle {
        id: greenRect

        anchors.left: redRect.right

        width: 200
        height: 200
        color: "green"
    }

    Rectangle {
        id: yellowRect
        anchors.left: greenRect.right
        width: 200
        height: 200
        color: "yellow"
    }

    Rectangle {
        id: blueRect

        width: 50
        height: 50
        color: "blue"

        anchors.margins: 20

        state: "red"

        onStateChanged: console.log("StateChanged", state)

        states: [
            State {
                name: "green"
                ParentChange {
                    target: blueRect
                    parent: greenRect
                    x: 0
                    y: 0
                }
                AnchorChanges {
                    target: blueRect
                    anchors.top: greenRect.top
                    anchors.left: greenRect.left
                }
            },
            State {
                name: "red"
                ParentChange {
                    target: blueRect
                    parent: redRect
                    x: 0
                    y: 0
                }
                AnchorChanges {
                    target: blueRect
                    anchors {
                        top: redRect.top
                        left: redRect.left
                    }
                }
            },
            State {
                name: "yellow"
                ParentChange {
                    target: blueRect
                    parent: yellowRect
                    x: 0
                    y: 0
                }
                AnchorChanges {
                    target: blueRect
                    anchors {
                        top: yellowRect.top
                        left: yellowRect.left
                    }
                }
            }
        ]

        MouseArea {
            anchors.fill: parent
            onClicked: if(blueRect.state == "red")
                           blueRect.state = "green"
                        else if(blueRect.state == "green")
                            blueRect.state = "yellow"
                        else
                            blueRect.state = "red"
        }

        transitions: Transition {
            ParallelAnimation {
                ParentAnimation {
                    via: root
                    NumberAnimation {
                        properties: "x,y"
                        duration: 1000
                        easing.type: Easing.InOutQuad
                    }
                }
                AnchorAnimation {
                    duration: 1000
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}