How to create a flip animation in blackberry cascades QML

Question

I'm new to blackberry cascades, I have looked into some of animations from the blackberry cascades samples from github but I'm not sure how to implement a page flip in and out animation instead of the default push and pop animation. Below is code of the page that performs the default push transition to next page. I need to replace this transition with flip. How should I go about it?

NavigationPane {
    id: nav
    peekEnabled: false
Page {
    id: mainPage

Button:
{
 onClicked:{

nav.push(homePageDefinition.createObject());
}
}

attachedObjects: [

    ComponentDefinition {
        id: homePageDefinition
        source: "homepage.qml"
    }
]
}
}

Answer 1

Try Flipable item. For example:

Flipable {
    id: flipable
    anchors.fill: parent
    property bool flipped: false
    front: Rectangle {anchors.fill: parent; color: "green"}
    back: Rectangle {anchors.fill: parent; color: "yellow" }
    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0
        angle: 0
    }
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }
    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 500 }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}