I’m trying a simple transition where my scene smoothly fades out by mouse click. Setting the opacity to zero makes the screen disappear, but doesn’t do it smoothly like the animation isn’t having any effect. Am I doing something wrong?
Scene {
id: splashScene
width: 480
height: 320
Rectangle {
color: "green"
anchors.fill: parent
}
// the Component element is the same as defining a MouseJoint in a separate file - it does not create the Joint immediately but only defines the QML item structure
// it is used to create a MouseJoint every time the user clicks on the scene
// if clicked on the scene, a new box will be created
MouseArea {
anchors.fill: parent
// a click is defined as a press followed by a release - only create a new box if the user didnt initially press on an existing body
// thus the creation must be done in onReleased, if selectedBody is not null
onClicked: {
console.log("onClick called")
splashScene.opacity = 0
}
Text {
anchors.centerIn: parent
text: "some text"
font.pixelSize: 18
color: "white"
}
transitions: [
Transition {
NumberAnimation {
property: "opacity"
easing.type: Easing.InOutQuad
duration: 10000
}
}
]
}