QML ParentChange transition animation issue
<p>I am not sure if this is a bug in Qt or it's how it should work, but here is a struggle i have:</p>

<p>First, the code that works how i expect it to work:</p>

<pre><code>import QtQuick 2.3
import QtQuick.Window 2.2

  Item {

      width: 200; height: 100
      objectName: "Item"

      Rectangle {
          id: redRect
          objectName: "Red rectangle"
          width: 100; height: 100
          color: "red"
      }

      Rectangle {
          id: blueRect
          objectName: "Blue rectangle"
          x: redRect.width
          width: 50; height: 50
          color: "blue"

          property bool selected: false

          states: State {
              when: blueRect.selected
              name: "reparented"
              ParentChange {
                  target: blueRect
                  parent: redRect
                  width: 10
                  height: 10
              }
          }

          transitions: [
              Transition {
                  from: "*"
                  to: "reparented"

                  ParallelAnimation{
                      ParentAnimation{
                          NumberAnimation{
                              properties: "width, height"
                              duration: 400
                          }
                      }
                      }
                  }
          ]

          onParentChanged: console.log("Parent now is :", parent.objectName)

          MouseArea { anchors.fill: parent; onClicked: blueRect.selected = !blueRect.selected}//blueRect.state = "reparented" }
      }
  }
</code></pre>

<p>When clicking on a blue rectangle, it gets reparented to a Red rectangle. The console output is:</p>

<pre><code>qml: Parent now is : Item   &lt;--- When component created
qml: Parent now is : Red rectangle   &lt;--- Reparenting when rectangle was clicked.
</code></pre>

<p>I found two cases when reparenting behaves differently. First, if in <code>ParentChange{...}</code> <code>x</code> or <code>y</code> properties are set as a function that returns value:</p>

<pre><code>import QtQuick 2.3
import QtQuick.Window 2.2

  Item {

      width: 200; height: 100
      objectName: "Item"

      Rectangle {
          id: redRect
          objectName: "Red rectangle"
          width: 100; height: 100
          color: "red"
      }

      Rectangle {
          id: blueRect
          objectName: "Blue rectangle"
          x: redRect.width
          width: 50; height: 50
          color: "blue"

          property bool selected: false

          function someFunc() {return 10} // &lt;------ add this line

          states: State {
              when: blueRect.selected
              name: "reparented"
              ParentChange {
                  target: blueRect
                  parent: redRect
                  width: someFunc()    // &lt;--- change here
                  height: someFunc()   // &lt;--- chaghe here
              }
          }

          transitions: [
              Transition {
                  from: "*"
                  to: "reparented"

                  ParallelAnimation{
                      ParentAnimation{
                          NumberAnimation{
                              properties: "width, height"
                              duration: 400
                          }
                      }
                      }
                  }
          ]

          onParentChanged: console.log("Parent now is :", parent.objectName)

          MouseArea { anchors.fill: parent; onClicked: blueRect.selected = !blueRect.selected}//blueRect.state = "reparented" }
      }
  }
</code></pre>

<p>And another case is when there is an Anchor change involved. For example:</p>

<pre><code>import QtQuick 2.3
import QtQuick.Window 2.2

  Item {

      width: 200; height: 100
      objectName: "Item"

      Rectangle {
          id: redRect
          objectName: "Red rectangle"
          width: 100; height: 100
          color: "red"
      }

      Rectangle {
          id: blueRect
          objectName: "Blue rectangle"
          x: redRect.width
          width: 50; height: 50
          color: "blue"

          property bool selected: false

          states: State {
              when: blueRect.selected
              name: "reparented"
              ParentChange {
                  target: blueRect
                  parent: redRect
                  width: 10
                  height: 10
              }
              AnchorChanges {
                  target: blueRect
                  anchors.horizontalCenter: parent.horizontalCenter
                  anchors.verticalCenter: parent.verticalCenter
              }
          }

          transitions: [
              Transition {
                  from: "*"
                  to: "reparented"

                  ParallelAnimation{
                      ParentAnimation{
                          NumberAnimation{
                              properties: "width, height"
                              duration: 400
                          }
                      }
                      AnchorAnimation {
                          duration: 400
                      }
                      }
                  }
          ]

          onParentChanged: console.log("Parent now is :", parent.objectName)

          MouseArea { anchors.fill: parent; onClicked: blueRect.selected = !blueRect.selected}//blueRect.state = "reparented" }
      }
  }
</code></pre>

<p>In both, second and third cases the output is:</p>

<pre><code>qml: Parent now is : Item   &lt;--- When component is created
qml: Parent now is : Red rectangle   &lt;--- Here is after blue rectangle is clicked
qml: Parent now is : Item   &lt;--- Now this is where it gets glitchy. Blue rectangle gets reparented back to Item
qml: Parent now is : Red rectangle   &lt;--- And now it gets reparented to a Red rectangle back, as i would expect.
</code></pre>

<p>Because of this issue, inside of <code>AnchorChanges{}</code> the value returned for <code>parent.vertical/horizontalCenter</code> is the <code>Item</code> when i would expect it to be <code>Red rectangle</code></p>

<p>So my question is: What could cause this effect, and is this a normal behavior, or it is a bug?</p>