[SOLVED] Transition in a row works only once.



  • 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



  • 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 }
            }
    
        }
    
    }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.