Layered animations create gaps between items - qt

Question

I am using a Row to layout a modifiable list of items whose size can change.
I want to animate insertions/removals smoothly so I added the move transition.
However, I also want to animate size changes of the items themselves.
This creates two animations: the size change of the resized item and the position change of items to their right.
Together, this results in a gap between the shrinking item and the one to its right.
You can see this effect with the following example code (left click on an item to change its size):
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
visible: true
width: row.width
height: row.height
Row {
id: row
move: Transition {
NumberAnimation {
property: "x"
easing.type: Easing.InOutQuad
duration: 100
}
}
Repeater {
model: ListModel {
id: listModel
ListElement {
itemColor: "red"
}
ListElement {
itemColor: "green"
}
ListElement {
itemColor: "blue"
}
ListElement {
itemColor: "yellow"
}
ListElement {
itemColor: "orange"
}
}
delegate: Rectangle {
id: rectangle
width: 100
height: 100
color: modelData
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked: rectangle.width = 400 - rectangle.width
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: listModel.remove(index)
}
Behavior on width {
PropertyAnimation {
easing.type: Easing.InOutQuad
duration: 100
}
}
}
}
}
}
So the question is how to avoid the gap.
Ideally, I'd like to separate the animation for insertion/removal from the animation for size changes. However, the documentation for move says that it is used for
Child items that move when they are displaced due to the addition, removal or rearrangement of other items in the positioner
Child items that are repositioned due to the resizing of other items in the positioner
So how can I avoid that gap while still animating the deletion and size change?
Please note
that the example above is only a minimal way to show the problem as I cannot post the real code here where the deletion is triggered by the QAbstractItemModel derivate's row deletion signal.

Answer 1

The gap is created by your move property which also interferes with your PropertyAnimation. So you should remove that property.
I wrapped a GridView and used in-built properties to handle animation. For example remove to define what definition and displaced to animate the movement when items get displaced.
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
visible: true
width: 100*listModel.count
height: 100
ListModel {
id: listModel
ListElement {
itemColor: "red"
}
ListElement {
itemColor: "green"
}
ListElement {
itemColor: "blue"
}
ListElement {
itemColor: "yellow"
}
ListElement {
itemColor: "orange"
}
}
GridView {
model: listModel
anchors.fill: parent
remove: Transition {
PropertyAnimation {
easing.type: Easing.InOutQuad
duration: 100
property: "width"
to: 0
}
}
displaced: Transition {
NumberAnimation {
properties: "x,y"
easing.type: Easing.InOutQuad
duration: 100 }
}
delegate:
Rectangle {
id: rectangle
width: 100
height: 100
color: modelData
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked: rectangle.width = 400 - rectangle.width
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: listModel.remove(index)
}
Behavior on width {
PropertyAnimation {
easing.type: Easing.InOutQuad
duration: 100
}
}
}
}
}
For example look at the documentation: http://doc.qt.io/qt-5/qml-qtquick-gridview.html#remove-prop
In the documentation of ViewTransition you can find more properties in GridView and ListView like populate, add.