Height animation does not work - qt

Question

I'm trying to create TableView 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
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; }
}
]
}
}
}

Answer 1

You have to use property name as a string to make it work:
PropertyAnimation { property:"height"; duration: 400; }
You could also achieve that via Behavior (remove transitions for that):
Behavior on height {
NumberAnimation { duration: 400 }
}