Important: Please read the Qt Code of Conduct -

QML States : Not able to see any transition, rectangle always remains in state1

  • Code :

    import QtQuick 1.0
    import 1.0

    PageStackWindow {
    id: rootWindow
    initialPage: page1

    Page {
        id: page1
        anchors.fill: parent
        Rectangle {
            id: rectItem
            width: 20
            height: 20
            color: "Red"
        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: rectItem; x: 0; y:20
            State {
                name: "state2"
                PropertyChanges {
                    target: rectItem; x: 100; y: 100
        state: "state1"
        transitions: [
            Transition {
                from: "state1"
                to: "state2"
                PropertyAnimation { duration: 1000; properties: "x";
                    easing.type: Easing.InOutQuad }
        Component.onCompleted: {
            timer.running = true;
    Timer {
        id: timer
        interval: 3000; running: false; repeat: true
        triggeredOnStart: true
        onTriggered: {
            state = state === "state2" ? "state1" : "state2"
            console.log(state +  "state");


    [EDIT: code formatting, Volker]

  • Sorry for previous formatting error , please find code below and please help me

    [EDIT: removed doubled code. Please edit the original post (link is to the right, below username and avatar) to change it in the future, thanks. Volker]

  • What is this state = state === ?

    I used the following, and it worked!
    state = (state == "state2")? "state1": "state2"


  • Hi Bill,

    Its still not working :( M testing on N9 device.


  • [quote author="billouparis" date="1329218245"]
    What is this state = state === ?

    JavaScript has an equality operator <code>==</code> and an identiy operator <code>===</code> - both do comparison, but the latter one not doing implicit type conversion.

    <code>state = state === ... ? ... :</code> is an conditional assignment as known from C++.

    [quote author="sonal1687" date="1329219216"]Its still not working[/quote]

    Do you get any console output so you can make sure the timer is fired?

  • Ok I tested it so:

    @state = state === "state2" ? "state1": "state2"@
    and it worked too indeed, sorry for this!

    So the issue must be somewhere else. In my case I tested it on desktop PC, and simply removed the Nokia component you're using, and replaced it with a simple Item / Rectangle elements combo.


  • Ok so it is working in desktop... Yes I do get console output that state is changing after every 3 seconds but I see no visual change in position of rectangle.


  • I got it : after putting state as page1.state :)

Log in to reply