QML: расширение ListView items

Question

У меня есть ListView и его delagates. Мое намерение - создать расширяемые делегаты (например, у меня есть три родительских делегата, если щелкнуть родительский делегат, он расширит свои дочерние элементы). Я сделал эту демонстрацию:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true

    id: root
    width: 1406; height: 536

    ListModel {
        id: animalsModel
        ListElement { name: "Cats"; isExpanded: false; type: "parent"}
        ListElement { name: "Puss in Boots 1"; isExpanded: false; type: "Cats"}
        ListElement { name: "Puss in Boots 2"; isExpanded: false; type: "Cats"}
        ListElement { name: "Puss in Boots 3"; isExpanded: false; type: "Cats"}

        ListElement { name: "Dogs"; isExpanded: false; type: "parent"}
        ListElement { name: "Pug 1"; isExpanded: false; type: "Dogs" }

        ListElement { name: "Birds"; isExpanded: false; type: "parent"}
        ListElement { name: "Parrot 1"; isExpanded: false; type: "Birds" }
        ListElement { name: "Parrot 2"; isExpanded: false; type: "Birds" }
        ListElement { name: "Parrot 3"; isExpanded: false; type: "Birds" }
    }

    ListView {
        id: listing

        width: 181
        height: parent.height
        model: animalsModel

        delegate: listdelegate
    }

    Component {
        id: listdelegate

        Rectangle {
            id: menuItem
            width: 181
            height: type === "parent" ? 55 : 0
            color: type === "parent" ? "lightblue" : "white"
            border.width: 1

            states: State {
                name: "expanded"
                when: isExpanded
                PropertyChanges {
                    target: menuItem
                    height: 55
                }
            }

            transitions:[
                Transition {
                    from: ""
                    to: "expanded"
                    reversible: true
                    SequentialAnimation {
                        PropertyAnimation { property: "height"; duration: 1000 }
                    }
                }
            ]

            Text {
                id: text
                text: name
                clip: true
                anchors.fill: parent
            }

            MouseArea {
                function expand(isExpanded) {
                    for(var i = 0; i < animalsModel.count; ++i) {
                        var animal = animalsModel.get(i)

                        if(animal.type === name) {
                            animal.isExpanded = isExpanded
                        }
                    }
                }

                anchors.fill: parent
                onClicked: {
                    if (type == "parent") {
                        if (isExpanded == false) {
                            // expand
                            expand(true)
                        }
                        else {
                            // collapse
                            expand(false)
                        }

                        isExpanded = !isExpanded
                    }
                }
            }
        }
    }
}

Работает отлично, за исключением одной маленькой детали: анимация высоты очень дорогая в моем случае (у меня более сложный процесс делагата). Как сделать независимую высоту анимации. Моя идея состоит в том, чтобы не изменять размер delagetes, только спрятать их за родителем. Как поезд, идущий в туннель. Но я не могу манипулировать свойством x делагатов в случае вертикального ListView.

Есть идеи, как этого добиться? В лучшем случае, как сделать анимацию, которую я описал?