QtQuick GridView element animations

Question

When a GridView is resized and it's elements get rearranged the animations of that elements don't seem to work.

Here you can find a simple example: http://pastebin.com/BgST6sCv
If one of the squares in the example is clicked the animation is triggered properly. But if you resize the window so that the GridView must rearrange it's elements the animation is NOT triggered.

Is there a way to fix that? Possibly without any C++?

EDIT:
I'm using the Qt SDK 1.1 which contains Qt 4.7.3 at the moment

Answer 1

This code will do it. Basically you need to create a dummy delegate item and then create another item inside that that has the same width, height, x and y values. Set the parent of the inside item to be your grid view. Here's your code modified to animate nicely.

import QtQuick 1.0

Rectangle {
    id: mainRect
    width: 300; height: 400

    ListModel {
        id: appModel
        ListElement { modelcolor: "#FF0000"}
        ListElement { modelcolor: "#00FF00"}
        ListElement { modelcolor: "#0000FF"}
    }

    Component {
        id: appDelegate

        Item {
            id: main
            width: grid.cellWidth; height: grid.cellHeight
            Rectangle {
                id: item; parent: grid
                x: main.x; y: main.y
                width: main.width; height: main.height;
                color: modelcolor
                Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        model: appModel
        delegate: appDelegate
        interactive: false
        MouseArea {
            anchors.fill: parent
            onClicked: {
                appModel.insert(1, { "modelcolor": "yellow" } )
            }
        }

    }
}