QML ListView populate opacity animation

Question

I have a ListView and I want to create an fade-in effect for populate ViewTransition. But it not works as expected. It seems that initial opacity of the delegate is 1.0 and so I need to set from property of the animation.
But it looked like a flashing. So I need to set initial opacity value of my delegate to 0.0.
Now I have a new problem... when I flick the list, delegates default opacity is 0.0 and so they are invisible.
So my question: Can anybody create a perfect fade-in animation for populate property of the ListView?

Thank you

import QtQuick 2.9

Rectangle {
    id: root
    property alias model: list.model
    ListView {
        id: list
        width: 300; height: 500
        model: sampleModel
        spacing: 30
        footer: Item { width: 1; height: 30 }
        populate: Transition {
            id: _popuTrans
            SequentialAnimation {
                PauseAnimation {
                    duration: 100*_popuTrans.ViewTransition.index
                }
                NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200 }
                PropertyAction { property: "opacity"; value: 1.0 }
            }
        }

        delegate: Component {
            Column {

                width: parent.width
                spacing: 13
                opacity: 0.0
                Rectangle {
                    width: parent.width*0.84
                    height: 1
                    color: colorPalette.altBackgroundColor
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Row {
                    width: parent.width
                    spacing: width*0.07
                    Text {
                        id: valueTxt
                        font { pointSize: 13 }
                        color: "black"
                        width: parent.width*0.64
                        text: model.body
                        wrapMode: Text.WordWrap
                        horizontalAlignment: Text.AlignRight
                    }
                    Text {
                        id: keyTxt
                        font { pointSize: 15; weight: Font.Medium }
                        color: "black"
                        width: parent.width*0.29
                        text: model.title
                        wrapMode: Text.WordWrap
                        horizontalAlignment: Text.AlignRight
                    }
                }
            }
        }
    }

    ListModel {
        id: sampleModel
        ListElement {
            title: "ابعاد"
            body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
        }
        ListElement {
            title: "وزن"
            body: "1.3kg"
        }
        ListElement {
            title: "پردازنده"
            body: "Qualcomm Snapdragon 835 3.1GHz"
        }
        ListElement {
            title: "سیستم عامل"
            body: "Microsoft Windows 10 Starter"
        }
        ListElement {
            title: "رنگ‌ها"
            body: "قرمز، نوک مدادی، سفید"
        }
        ListElement {
            title: "اتصالات"
            body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
        }
        ListElement {
            title: "باتری"
            body: "Li-ion 8345mAh Turbo Charge Capable"
        }
        ListElement {
            title: "حافظه RAM"
            body: "DDR4 2x8GB AData"
        }


        ListElement {
            title: "ابعاد"
            body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
        }
        ListElement {
            title: "وزن"
            body: "1.3kg"
        }
        ListElement {
            title: "پردازنده"
            body: "Qualcomm Snapdragon 835 3.1GHz"
        }
        ListElement {
            title: "سیستم عامل"
            body: "Microsoft Windows 10 Starter"
        }
        ListElement {
            title: "رنگ‌ها"
            body: "قرمز، نوک مدادی، سفید"
        }
        ListElement {
            title: "اتصالات"
            body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
        }
        ListElement {
            title: "باتری"
            body: "Li-ion 8345mAh Turbo Charge Capable"
        }
        ListElement {
            title: "حافظه RAM"
            body: "DDR4 2x8GB AData"
        }ListElement {
            title: "ابعاد"
            body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
        }
        ListElement {
            title: "وزن"
            body: "1.3kg"
        }
        ListElement {
            title: "پردازنده"
            body: "Qualcomm Snapdragon 835 3.1GHz"
        }
        ListElement {
            title: "سیستم عامل"
            body: "Microsoft Windows 10 Starter"
        }
        ListElement {
            title: "رنگ‌ها"
            body: "قرمز، نوک مدادی، سفید"
        }
        ListElement {
            title: "اتصالات"
            body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
        }
        ListElement {
            title: "باتری"
            body: "Li-ion 8345mAh Turbo Charge Capable"
        }
        ListElement {
            title: "حافظه RAM"
            body: "DDR4 2x8GB AData"
        }ListElement {
            title: "ابعاد"
            body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
        }
        ListElement {
            title: "وزن"
            body: "1.3kg"
        }
        ListElement {
            title: "پردازنده"
            body: "Qualcomm Snapdragon 835 3.1GHz"
        }
        ListElement {
            title: "سیستم عامل"
            body: "Microsoft Windows 10 Starter"
        }
        ListElement {
            title: "رنگ‌ها"
            body: "قرمز، نوک مدادی، سفید"
        }
        ListElement {
            title: "اتصالات"
            body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
        }
        ListElement {
            title: "باتری"
            body: "Li-ion 8345mAh Turbo Charge Capable"
        }
        ListElement {
            title: "حافظه RAM"
            body: "DDR4 2x8GB AData"
        }ListElement {
            title: "ابعاد"
            body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
        }
        ListElement {
            title: "وزن"
            body: "1.3kg"
        }
        ListElement {
            title: "پردازنده"
            body: "Qualcomm Snapdragon 835 3.1GHz"
        }
        ListElement {
            title: "سیستم عامل"
            body: "Microsoft Windows 10 Starter"
        }
        ListElement {
            title: "رنگ‌ها"
            body: "قرمز، نوک مدادی، سفید"
        }
        ListElement {
            title: "اتصالات"
            body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
        }
        ListElement {
            title: "باتری"
            body: "Li-ion 8345mAh Turbo Charge Capable"
        }
        ListElement {
            title: "حافظه RAM"
            body: "DDR4 2x8GB AData"
        }
    }
}

GrecKo GrecKo · Accepted Answer · 2018-04-11T10:57:18

The flashing is due to your PauseAnimation, the opacity stays at 1 during its entire duration. Here is a beautiful graph illustrating the delegate's opacity over time during the populate transition :

You need to set the opacity of the delegates to 0 before the PauseAnimation, and in the populate transition, not directly in the delegate (the transition is only applied to visible delegates, that's why delegates below the content area stay invisible).

In order to do this, remove the opacity: 0 in your delegate and just add a PropertyAction before the PauseAnimation in your transition:

populate: Transition {
    id: _popuTrans
    SequentialAnimation {
        PropertyAction { property: "opacity"; value: 0.0 }
        PauseAnimation { duration: 100*_popuTrans.ViewTransition.index }
        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.InOutQuad }
    }
}

QML ListView populate opacity animation

1 Answers