Cool QML fade Behavior : https://zippy.gfycat.com/SilentImpressiveChameleon.webm

FadeAnimation.qml

import QtQuick 2.0

SequentialAnimation {
    id: root
    property QtObject target
    property string fadeProperty: "scale"
    property int fadeDuration: 150
    property alias outValue: outAnimation.to
    property alias inValue: inAnimation.to
    property alias outEasingType: outAnimation.easing.type
    property alias inEasingType: inAnimation.easing.type
    property string easingType: "Quad"
    NumberAnimation {
        id: outAnimation
        target: root.target
        property: root.fadeProperty
        duration: root.fadeDuration
        to: 0
        easing.type: Easing["In"+root.easingType]
    }
    PropertyAction { } // actually change the property between the 2 other animations
    NumberAnimation {
        id: inAnimation
        target: root.target
        property: root.fadeProperty
        duration: root.fadeDuration
        to: 1
        easing.type: Easing["Out"+root.easingType]
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.centerIn: parent
        color: "red"
        width: 100
        height: width
        radius: width/2
        Text {
            id: textItem
            anchors.centerIn: parent
            font.pixelSize: 30
            color: "white"
            property int foo: 0
            text: foo
            Behavior on foo {
                FadeAnimation {
                    target: textItem
                }
            }
        }
        MouseArea {
            anchors.fill: parent
            onClicked: textItem.foo++
        }
    }
}