qml: Rectangle animation not working - qt

Question

I have an application, where I want to apply an animation to a button/ rectangle and after this executes the animation, it should display a dialog. The problem is that when the dialog.visible: true is called on onClicked, the animation is not executed. I have created a test application here are the two qml files:
main.qml
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
FileDialogs
{
id:fileDialog
visible:false
width:800
height:800
//modality: Qt.WindowModal
z:10
}
Rectangle
{
id:rect
width:200
height:200
color:"blue"
Text
{
id:simpleText
text:"This is a button"
font.pixelSize: 20
color:"white"
width:200
height:200
}
states: [
State {
name: "PRESSED"
},
State {
name: "RELEASED"
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
}
]
MouseArea {
anchors.fill: parent
onPressed:
{
parent.state = "PRESSED"
}
onReleased:
{
parent.state = "RELEASED"
}
onClicked: {
fileDialog.visible=true;
}
}
}
}
FileDialogs.qml, from Qt examples
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Item {
width: 580
height: 400
SystemPalette { id: palette }
clip: true
//! [filedialog]
FileDialog {
id: fileDialog
visible: fileDialogVisible.checked
modality: Qt.WindowModal
title: fileDialogSelectFolder.checked ? "Choose a folder" :
(fileDialogSelectMultiple.checked ? "Choose some files" : "Choose a file")
selectExisting: fileDialogSelectExisting.checked
selectMultiple: fileDialogSelectMultiple.checked
selectFolder: fileDialogSelectFolder.checked
nameFilters: [ "Image files (*.png *.jpg)", "All files (*)" ]
selectedNameFilter: "All files (*)"
sidebarVisible: fileDialogSidebarVisible.checked
onAccepted: {
console.log("Accepted: " + fileUrls)
if (fileDialogOpenFiles.checked)
for (var i = 0; i < fileUrls.length; ++i)
Qt.openUrlExternally(fileUrls[i])
}
onRejected: { console.log("Rejected") }
}
//! [filedialog]
ScrollView {
id: scrollView
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: bottomBar.top
leftMargin: 12
}
ColumnLayout {
spacing: 8
Item { Layout.preferredHeight: 4 } // padding
Label {
font.bold: true
text: "File dialog properties:"
}
CheckBox {
id: fileDialogModal
text: "Modal"
checked: true
Binding on checked { value: fileDialog.modality != Qt.NonModal }
}
CheckBox {
id: fileDialogSelectFolder
text: "Select Folder"
Binding on checked { value: fileDialog.selectFolder }
}
CheckBox {
id: fileDialogSelectExisting
text: "Select Existing Files"
checked: true
Binding on checked { value: fileDialog.selectExisting }
}
CheckBox {
id: fileDialogSelectMultiple
text: "Select Multiple Files"
Binding on checked { value: fileDialog.selectMultiple }
}
CheckBox {
id: fileDialogOpenFiles
text: "Open Files After Accepting"
}
CheckBox {
id: fileDialogSidebarVisible
text: "Show Sidebar"
checked: fileDialog.sidebarVisible
Binding on checked { value: fileDialog.sidebarVisible }
}
CheckBox {
id: fileDialogVisible
text: "Visible"
Binding on checked { value: fileDialog.visible }
}
Label {
text: "<b>current view folder:</b> " + fileDialog.folder
}
Label {
text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}"
}
Label {
text: "<b>current filter:</b>" + fileDialog.selectedNameFilter
}
Label {
text: "<b>chosen files:</b> " + fileDialog.fileUrls
}
Label {
text: "<b>chosen single path:</b> " + fileDialog.fileUrl
}
}
}
Rectangle {
id: bottomBar
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: buttonRow.height * 1.2
color: Qt.darker(palette.window, 1.1)
border.color: Qt.darker(palette.window, 1.3)
Row {
id: buttonRow
spacing: 6
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
height: implicitHeight
width: parent.width
Button {
text: "Open"
anchors.verticalCenter: parent.verticalCenter
onClicked: fileDialog.open()
}
Button {
text: "Pictures"
tooltip: "go to my Pictures directory"
anchors.verticalCenter: parent.verticalCenter
enabled: fileDialog.shortcuts.hasOwnProperty("pictures")
onClicked: fileDialog.folder = fileDialog.shortcuts.pictures
}
Button {
text: "Home"
tooltip: "go to my home directory"
anchors.verticalCenter: parent.verticalCenter
enabled: fileDialog.shortcuts.hasOwnProperty("home")
onClicked: fileDialog.folder = fileDialog.shortcuts.home
}
}
}
}

Answer 1

The animation is happening. It's just the FileDialog is covering the button before you can see it animate. Release the mouse click outside the button area and you'll see the animation (this way onClicked is not triggered).
A way to show the dialog after the animation:
states: [
State {
name: "PRESSED"
},
State {
name: "RELEASED"
}
]
transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
PropertyAnimation { id: selectAnim; target: rect; properties: "scale"; easing.type: Easing.OutBack; easing.amplitude: 3.0; easing.period: 1.5; from: 0; to: 1; duration: 400 }
onRunningChanged: {
if (!running) {
fileDialog.visible = true
}
}
}
]
MouseArea {
anchors.fill: parent
onPressed:
{
parent.state = "PRESSED"
}
onClicked: {
parent.state = "RELEASED"
}
}