[SOLVED] Transition in a row works only once.

matteli

Hi all,

Here the code :
@
import QtQuick 2.0

Rectangle {
width: 200
height: 50
Row {
id: row
spacing: 2

    Rectangle { id: rect1; color: "green"; width: 50; height: 50}
    Rectangle { id: rect2; color: "blue"; width: 50; height: 50}
    Rectangle { id: rect3; color: "red"; width: 50; height: 50;
    MouseArea {
            anchors.fill: parent
            onClicked: {
                if (row.state == "one")
                    row.state = "all"
                else
                    row.state = "one"
            }
       }
    }
    state: "one"
    states: [
            State {
                name: "one"
                PropertyChanges { target: rect1; visible: false }
                PropertyChanges { target: rect2; visible: false }
            },
            State {
                name: "all"
                PropertyChanges { target: rect1; visible: true }
                PropertyChanges { target: rect2; visible: true }
            }
        ]
    add: Transition {
            NumberAnimation { property: "x"; duration: 2000; easing.type: Easing.OutBack }
        }

    move: Transition {
            NumberAnimation { property: "x"; duration: 2000; easing.type: Easing.OutBack }
        }
}

}
@

The first time i click, no problem, the red, blue and green square take place with a smooth transition.

When i click again for that the green and blue square disappear, there is a smooth transition for the red but not for the 2 others. So 1st problem, there is a add property for the transition in a row but not a remove property.

When i click again for that the green and blue become visible again, there is a smooth transition for the red but not for the 2 others. So 2nd problem, the add property for the transition in a row works only the 1st time.

What do you think of this ? Do you think that i can put that on the bug tracker or is it a normal behavior ?

Thanks

matteli

matteli

I found a solution :
@
import QtQuick 2.0

Rectangle {
width: 200
height: 50
Row {
id: row

    Rectangle { id: rect1; color: "green"; height: 50}
    Rectangle { id: rect2; color: "blue"; height: 50}
    Rectangle { id: rect3; color: "red"; width: 50; height: 50;
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (row.state == "one")
                    row.state = "all"
                else
                    row.state = "one"
            }
       }
    }
    state: "one"
    states: [
            State {
                name: "one"
                PropertyChanges { target: row; spacing: 0 }
                PropertyChanges { target: rect1; width: 0 }
                PropertyChanges { target: rect2; width: 0 }
            },
            State {
                name: "all"
                PropertyChanges { target: row; spacing: 10 }
                PropertyChanges { target: rect1; width: 50 }
                PropertyChanges { target: rect2; width: 50 }
            }
        ]

    transitions: Transition {
        ParallelAnimation{
            NumberAnimation { property: "spacing"; duration: 2000; easing.type: Easing.Linear }
            NumberAnimation { property: "x"; duration: 2000; easing.type: Easing.Linear }

            NumberAnimation { properties: "width"; duration: 2000; easing.type: Easing.Linear }
        }

    }

}

}
@