QML animations visible property changes

Question

I want an animation to be painted when an element becomes visible (is should appear smoothly, not the whole at all)

I tried this

states: State
{
    name         


        

Answer 1

Here is how to do it with opacity:

Rectangle {
    id: myRect
    property bool stateVisible: true
    ...
    states: [
        State { when: stateVisible;
            PropertyChanges {   target: myRect; opacity: 1.0    }
        },
        State { when: !stateVisible;
            PropertyChanges {   target: myRect; opacity: 0.0    }
        }
    ]
    transitions: Transition {
        NumberAnimation { property: "opacity"; duration: 500}
    }
}

Keep in mind the advice of Vasco Rinaldo.