Add an element to a repeater with animation

javascript, qml, qt, qt-quick, qtquick2

Solution

Maybe you have an issue with your model or your delegate, or the layouting (items overlapping...), cause here, this works fine :

import QtQuick 2.0;

Rectangle {
    width: 400;
    height: 300;

    Timer {
        running: true;
        repeat: true;
        interval: 1000;
        onTriggered: { modelTest.append ({ "bg" : Qt.hsla (Math.random (), 0.85, 0.45, 1.0).toString () }); }
    }
    Flow {
        anchors.fill: parent;

        Repeater {
            model: ListModel {
                id: modelTest;
            }
            delegate: Rectangle {
                id: rect;
                color: model.bg;
                width: 50;
                height: width;
                scale: 0.0;

                PropertyAnimation {
                    target: rect;
                    property: "scale";
                    from: 0.0;
                    to: 1.0;
                    duration: 450;
                    running: true;
                    loops: 1;
                }
            }
        }
    }
}

Remember that only ListModel and QAbstractListModel are able to add dynamically new items without resetting the whole delegates, the other (variant list, JS array, numbers) will cause all the delegates to be re-instanciated at each model modification...

Problem

I have a repeater which elements are animated when they are created. ``` Repeater { model : 0 Image { ... Animation { ... } } } ``` Everything is working if I add an element to the model after the previous element's animation is finished. But it dowsn't work if I add an eleent before. For example, if I had a gun that shoots a bullet, if I wait until the animation of the bullet ends everything works. But if I want to shoot another bullet before the first ends, the first disappears and I only see the animation of the second. What Should I do to see all the animations?

Original source