Displaced ViewTransition not triggered in QML

Question

So I have a ListView and ListModel to which I'm adding objects dynamically. I want a displaced animation to happen to when a new object is added, but from what I can see, only the add transition is triggered and the displaced transition is never triggered. Based on the tutorial, this works:

  Rectangle {
        anchors.fill: parent
        ListView {
          width: 240; height: 320
          model: ListModel {
              id: model
          }

          Component {
              id: del
              Row {
                  height: 20
                  spacing: 20
                  Text { text: name }
                  Text { text: age }
              }
          }

          delegate: del

          add: Transition {
              NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 1000 }
          }

          displaced: Transition {
              NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
          }

          focus: true
          Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count, "age":21})
        }
    }

But this only triggers the add transition.

        Rectangle {
            height: 500
            width: 0.90 * parent.width
            anchors {
                top: parent
                topMargin: 30
                left: parent.left
                leftMargin: 45
            }
            ListView {
                anchors.fill: parent
                model: notificationModel
                delegate: notificationDelegate
                spacing: 30

                add: Transition {
                    NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
                }
                displaced: Transition {
                    NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
                }
            }
        }

        ListModel {
            id: notificationModel
            Component.onCompleted: {
                    notificationModel.append({"name": "Tony"})
                }
        }

        Timer {
            interval: 5000; running: true; repeat: true
            onTriggered: notificationModel.append({"name": "Stark"})
        }

        Component {
            id: notificationDelegate
            Row {
                spacing: 20
                Text { text: name; color: "white" }
            }
        }

Any idea why this happens? Thanks!

Answer 1

The displaced transition is triggered when an item in the list is forced to move because another item is added/removed/etc. The working example works because a single item gets inserted at the beginning of the list causing the remaining items to be displaced.

With the current code you are showing, the problem is that you are using the append function instead of insert. Append adds items to the bottom of the list, so no items are getting displaced.

Before you edited your question, you had a different problem. You were using insert to add items to the beginning of the list, but every time you added one, you were clearing the entire list and rebuilding it. So again, nothing was getting displaced because the entire list was getting recreated every time.