"Chained" transitions?

[GordonSchumacher]

I'm trying to achieve a Transition which pauses in the middle to wait for a signal to be fired. My current attempt is to break the Transition in two pieces. What I have almost works, and I'm not clear what I'm doing wrong.
It is going through the correct state changes, but the second Transition is never executed. I'm kind of at a loss here...

Here's my test app:

@import Qt 4.7

Flipable {
id: flipper
width: 360
height: 360

property int angle: 0
property bool displayingFront: true
property bool waitingForTimer: false

Timer {
    id: timer
    interval: 800; running: waitingForTimer; repeat: false
    onTriggered: { console.log("triggered"); waitingForTimer = false; displayingFront = !displayingFront; }
}
Timer {
    id: debug
    interval: 100; running: true; repeat: true
    onTriggered: { console.log(flipper.state, displayingFront, waitingForTimer); }
}

front: Rectangle {
    anchors.fill: parent
    color: "red"
    Text {
        anchors.centerIn: parent
        text: "front"
    }
}
back: Rectangle {
    anchors.fill: parent
    color: "green"
    Text {
        anchors.centerIn: parent
        text: "back"
    }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        waitingForTimer = true;
    }
}

states: [
    State {
        name: "displayingFront"
        when: displayingFront && !waitingForTimer
    },
    State {
        name: "switchingToBack"
        when: displayingFront && waitingForTimer
    },
    State {
        name: "displayingBack"
        when: !displayingFront && !waitingForTimer
    },
    State {
        name:  "switchingToFront"
        when: !displayingFront && waitingForTimer
    }
]

transitions: [
    Transition {
        from: "displayingFront"; to: "switchingToBack"
        SequentialAnimation {
            ScriptAction { script: console.log("displayingFront -> switchingToBack"); }
            PropertyAnimation { target: timer; property: "running"; to: true }
        }
    },
    Transition {
        from: "switchingToBack"; to: "displayingBack"
        SequentialAnimation {
            ScriptAction { script: console.log("switchingToBack -> displayingBack"); }
            NumberAnimation { target: flipper; property: "angle"; to: 180; duration: 800; }
        }
    },
    Transition {
        from: "displayingBack"; to: "switchingToFront"
        SequentialAnimation {
            ScriptAction { script: console.log("displayingBack -> switchingToFront"); }
            PropertyAnimation { target: timer; property: "running"; to: true }
        }
    },
    Transition {
        from: "switchingToFront"; to: "displayingFront"
        SequentialAnimation {
            ScriptAction { script: console.log("switchingToBack -> displayingFront"); }
            NumberAnimation { target: flipper; property: "angle"; to: 0; duration: 800; }
        }
    }
]

transform: Rotation {
    id: rotation
    origin.x: flipper.width / 2
    origin.y: flipper.height / 2
    axis.x: 0; axis.y: 1; axis.z: 0
    angle: flipper.angle
}

}@

Does anyone have any idea what it's doing? TIA...

[GordonSchumacher]

Here's another semi-working version:

@import Qt 4.7

Flipable {
id: flipper
width: 360
height: 360

property int angle: 0
property bool frontShowing: true
property bool waitingForTimer: false
property string frontColor: "red"
property string backColor: "green"

Timer {
    id: timer
    interval: 2000; running: false; repeat: false
    onTriggered: {
        console.log("triggered")
        waitingForTimer = !waitingForTimer;
    }
}   

Timer {
    id: timer2
    interval: 200; running: true; repeat: true
    onTriggered: { 
        console.log(flipper.state + " " + frontShowing  + " " + waitingForTimer);
    }
}

front: Rectangle {
    anchors.fill: parent
    color: frontColor
    Text {
        anchors.centerIn: parent
        text: "front"
    }
}
back: Rectangle {
    anchors.fill: parent
    color: backColor
    Text {
        anchors.centerIn: parent
        text: "back"
    }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
       timer.start();
       frontShowing = !frontShowing;
       waitingForTimer = true;                      
    }
}

states: [
    State {
        name: "displayingFront"
        when: frontShowing && !waitingForTimer
        PropertyChanges { target: timer; running: false }
        PropertyChanges { target: flipper; angle: 0 }
        PropertyChanges { target: flipper; frontColor: "red" }
    },
    State {
        name: "switchingToBack"
        when: !frontShowing && waitingForTimer
        PropertyChanges { target: flipper; frontColor: "blue" }
        PropertyChanges { target: timer; running: true }
    },
    State {
        name: "displayingBack"
        when: !frontShowing && !waitingForTimer
        PropertyChanges { target: timer; running: false }
        PropertyChanges { target: flipper; angle: 180 }
        PropertyChanges { target: flipper; backColor: "green" }
    },
    State {
        name:  "switchingToFront"
        when: frontShowing && waitingForTimer
        PropertyChanges { target: flipper; backColor: "blue" }
        PropertyChanges { target: timer; running: true }
    }
]

transitions: [
    Transition {
        from: "displayingFront"; to: "switchingToBack"
        ScriptAction { script: console.log("displayingFront -> switchingToBack"); }
    },
    Transition {
        from: "switchingToBack"; to: "displayingBack"
        SequentialAnimation {
            ScriptAction { script: console.log("switchingToBack -> displayingBack"); }
            NumberAnimation { properties: "angle"; to: 180; duration: 800; }
        }
    },
    Transition {
        from: "displayingBack"; to: "switchingToFront"
        ScriptAction { script: console.log("displayingBack -> switchingToFront"); }
    },
    Transition {
        from: "switchingToFront"; to: "displayingFront"
        SequentialAnimation {
            ScriptAction { script: console.log("switchingToFront -> displayingFront"); }
            NumberAnimation { properties: "angle"; to: 0; duration: 800; }
        }
    }
]

transform: Rotation {
    id: rotation
    origin.x: flipper.width / 2
    origin.y: flipper.height / 2
    axis.x: 0; axis.y: 1; axis.z: 0
    angle: flipper.angle
}

}@