Animated Items in Gridview hides behind following items

Cermit

Hi, I need some help!

I have a grid view with a random number of items. If I click on an item I want the item to change position and size (should be greater and moving to the center of the application). I tried it with a ParentChange and made a little example to demonstrate my problem:

main.qml
@import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
id: main
width: 1920; height: 1080
visible: true
//visibility: "FullScreen"
color: "black"

 GridView {
     id: grid_view
     anchors.fill: parent
     anchors.centerIn: parent
     cellWidth: 300
     cellHeight: 300

     model: 9
     delegate: fileDelegate

     Component {
         id: fileDelegate
         Rectangle {
             width: grid_view.cellWidth; height: grid_view.cellHeight
             radius: 20
             color: "black"
             TestElement {anchors.fill: parent}
         }
     }
 }

 Rectangle {
     id: main_view
     width: 1280; height: 720
     radius: 10
     color: "transparent"
     anchors.centerIn: parent
 }

}
@

TestElement.qml
@
import QtQuick 2.2

Item {
id: container

function randomBg(){
   var hex1=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var hex2=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var hex3=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var hex4=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var hex5=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var hex6=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
   var bg="#"+hex1[Math.floor(Math.random()*hex1.length)]+hex2[Math.floor(Math.random()*hex2.length)]+hex3[Math.floor(Math.random()*hex3.length)]+hex4[Math.floor(Math.random()*hex4.length)]+hex5[Math.floor(Math.random()*hex5.length)]+hex6[Math.floor(Math.random()*hex6.length)]
   return bg
}

Rectangle {
    id: rect
    width: parent.width; height: parent.height; radius: 20
    property bool maximized: false
    color: randomBg()

    MouseArea {
        id: playArea
        anchors.fill: parent
        onClicked: rect.maximized = !rect.maximized
    }

    states: State {
        name: "maximized"
        when: rect.maximized
        
        ParentChange {
            target: rect
            parent: main_view
            x: 0; y: 0;
            width: parent.width; height: parent.height
        }
        PropertyChanges {target: rect; radius:0}
    }

    transitions: Transition {
        from: "*"
        to: "maximized"
        reversible: true
        ParentAnimation {
            PropertyAnimation {
                target: rect
                properties: "x,y,width,height"
                easing.type: "InOutQuad"; duration: 1000
            }
        }
    }
}

}
@

The animation for maximizing works fine but when the transition is reversed, the rectangle hides behind his following items in the grid view. I tried to change the z-value but this didn't help!

Thanks for your help!
Cermit