Qt Quick 1.1: How to slide elements out of a QML listview when removed?

Question

In my application UI, I display a number of elements in a QML listview and when one of them is removed, it is supposed to slide up behind the element above it in an animated manner. The code to achieve this is really similar to this sample from Qt documentation, only I animate the y coordinate instead of the scale and I need to decrement the z value to make sure the element slides up behind and not in front of the element above it:

Component {
    id: delegate
    Item {
        ListView.onRemove:
            SequentialAnimation {
                // enable delayed removal
                PropertyAction {
                    target: wrapper
                    property: "ListView.delayRemove"
                    value: true
                }
                // make box slide up behind rather
                // than in front of the box above
                PropertyAction {
                    target: wrapper
                    property: "z"
                    value: wrapper.z - 1
                }
                NumberAnimation {
                    target : wrapper
                    property : "y"
                    from : wrapper.y
                    to   : wrapper.y - wrapper.height
                    duration    : style.removeTransitionDuration
                    easing.type : style.removeTransitionType
                }
                // disable delayed removal
                PropertyAction {
                    target: wrapper
                    property: "ListView.delayRemove"
                    value: false
        }
    }
}

This code basically works, but has one massive flaw: While the element being removed slides up, the elements below it stay where they are and only 'jump up' to their new position after the element has disappeared completely. I would like them to move along upwards while the element being removed slides up.

I have tried to animate any element movement in y direction by specifying Behavior on y to be a PropertyAnimation as shown in this sample; this works when the y property is set explicitely (for example in a MouseArea::onClicked handler), but there is no animation when y changes implicitely because an element was removed.

I also tried animating other properties, such as height or scale as is done in the Dynamic List ListView Example and combining that with opacity, but as the element is somewhat complex, the results look plain aweful - and the design department was rather specific that the element really should slide up.

How can I slide up an element with the ones below moving along ? Is this possible in Qt 4.8 / Qt Quick 1.1 at all ? Is there any improvement in Qt 5 / Qt Quick 2.0 with regards to this specific problem ?

Answer 1

ListView has some new Properties in Qt Quick 2.0:

1. remove: "This property holds the transition to apply to items that are removed from the view."
2. removeDisplaced: "This property holds the transition to apply to items in the view that are displaced by the removal of other items in the view."

removeDisplaced should be the property that you are looking for. I don't know a way in Qt Quick 1.0 unfortunately.