Height animation does not work inside table view

Rinat Veliakhmedov

Hello. I'm trying to create table view with rows that can expand and show some content on click. It works, but does not show height property animation. I tried to add ColorAnimation and change expanded row color to black and it works well, but for some reason it does not work for height.
Here is the code of my table view:

 TableView {
            id: myTableView
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 12
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 12
            anchors.rightMargin: 10

            model: myModel

            ListModel {
              //...
            }

            rowDelegate: Item {
                id: myRowDelegate

                Rectangle {
                    id: rect
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 22
                    color: styleData.alternate ? "#d9e5ea" : "white"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            myRowDelegate.state = (myRowDelegate.state == "COLLAPSED") ? "EXPANDED" : "COLLAPSED";
                            console.log("click");
                        }
                    }
                }
                state: "COLLAPSED"
                states: [
                    State {
                        name: "COLLAPSED"
                        PropertyChanges { target: myRowDelegate; height: 22; }
                    },
                    State {
                        name: "EXPANDED"
                        PropertyChanges { target: myRowDelegate; height: 400; }
                       // PropertyChanges { target: rect; color: "black"; }
                    }
                ]
                transitions: [
                    Transition {
                        from: "EXPANDED"
                        to: "COLLAPSED"
                        PropertyAnimation { property: height; duration: 400; }
                      //  ColorAnimation { duration: 400; }
                    },
                    Transition {
                        from: "COLLAPSED"
                        to: "EXPANDED"
                        PropertyAnimation { property: height; duration: 400; }
                        //ColorAnimation { duration: 400; }
                    }
                ]
            }   
        }
    }

Rinat Veliakhmedov

I got a solution on SO: I should've used "height" instead of height inside PropertyAnimation.