QML fade out changed item

Question

I'm new to Qt and QML - this seems like a rather simple issue but I can't find a simple solution to it.

Say I have the following example QML

Item {
    ... lots of other stuff

    Item {
        id: obj_container

        property var obj

        Text {
            text: obj.name
        }

        Image {
            source: obj.source
        }
    }
}

Now when the obj property becomes null, I would like to fade out the obj_container item, while still displaying the values it had before it was set to null.

Alternatively, if the obj item changes to a different obj, I would like to fade out the obj_container item (still displaying its previous values) and then fade it in again with the new values.

How would I go about this?

UPDATE

the obj in the example is a Q_PROPERTY of an object set using setContextProperty from C++, as in

engine.rootContext()->setContextProperty("obj_holder", &obj_holder);

the obj property in the example above would then be set like

obj_container.obj = obj_holder.obj

though I think for the purposes above it doesn't make a difference where the obj property is coming from or how it was set/changed. When the obj changes, the above should happen (fade out obj_container with old values, fade in obj_container with new values)

Answer 1

Fading out can be easy done with one of Animation .

For example:

import QtQuick 2.4
import QtQuick.Window 2.2


Window {
    width: 600
    height: 400
    visible: true

    Text {
        id: txt
        anchors.centerIn: parent
        property int count: 0
        text: count
        opacity: 1
        font.pixelSize: 100
         SequentialAnimation {
             id: anim
             PropertyAnimation {
                 target: txt
                 property: "opacity"
                 to: 0
                 duration: 1000
                 easing.type: Easing.OutQuart
             }
             PropertyAction {
                 target: txt
                 property: "count"
                 value: txt.count + 1
             }
             PropertyAnimation {
                 target: txt
                 property: "opacity"
                 to: 1
                 duration: 1000
                 easing.type: Easing.InOutCubic
             }
         }
    }

    Timer {
        interval: 2000
        repeat: true
        running: true
        onTriggered: anim.running = true
    }
}