Expanding List

list-expand.qml

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    width: 800
    height: 480

    color: "#444"

    ListView {
        id: list
        anchors.fill: parent
        model: ["One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten","Elleven","Twelve"]

        header: Item { height: 32 }
        footer: Item { height: 64 }
        delegate: Item {
            id: delegate

            property alias content: tile

            height: 128
            width: parent.width

            Rectangle {
                id: tile

                width: parent.width; height: parent.height
                color: "#444"

                Text {
                    id: txt
                    x: 320; y: 32
                    text: model.modelData
                    font { pixelSize: 64 }
                    color: "white"
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (app.state !== "details") {
                            list.currentIndex = model.index;
                            app.state = "details";
                        } else {
                            app.state = "list";
                        }
                    }
                }

                states: [
                    State {
                        name: "details"
                        PropertyChanges { target: txt; y: 64 }
                    }
                ]
                transitions: [
                    Transition {
                        from: ""; to: "details"
                        NumberAnimation { target: txt; property: "y"; duration: 200; easing.type: Easing.InQuad }
                        reversible: true
                    }
                ]
            }
        }
    }

    Item {
        id: details
        anchors.fill: parent
    }

    StateGroup {
        id: app
        state: "list"
        states: [
            State {
                name: "list"
                PropertyChanges { target: list; visible: true }
                PropertyChanges { target: details; visible: false }
            },
            State {
                name: "details"
                ParentChange { target: list.currentItem.content; parent: details; width: details.width; height: details.height; x: 0; y: 0 }
                PropertyChanges { target: list; visible: false }
                PropertyChanges { target: details; visible: true }
                PropertyChanges { target: list.currentItem.content; state: "details" }
            }
        ]
        transitions: [
            Transition {
                from: "list"; to: "details"
                SequentialAnimation {
                    PropertyAction { target: details; properties: "visible" }
                    ParallelAnimation {
                        NumberAnimation { target: list; property: "opacity"; duration: 200; from: 1; to: 0; easing.type: Easing.OutQuad }
                        ParentAnimation { via: details; NumberAnimation { properties: "width,height,x,y"; duration: 200; easing.type: Easing.InQuad } }
                    }
                    PropertyAction { target: list; properties: "visible" }
                }
            },
            Transition {
                from: "details"; to: "list"
                SequentialAnimation {
                    PropertyAction { target: list; properties: "visible" }
                    ParallelAnimation {
                        NumberAnimation { target: list; property: "opacity"; duration: 200; from: 0; to: 1; easing.type: Easing.InQuad }
                        ParentAnimation { via: details; NumberAnimation { properties: "width,height,x,y"; duration: 200; easing.type: Easing.OutQuad } }
                    }
                    PropertyAction { target: details; properties: "visible" }
                }
            }
        ]
    }
}