Animated transitions for dynamically created items

klopp

I am looking to add animated transitions for dynamically created and destroyed popups on my main screen and am unsure of how to integrate them successfully. Ideally, they would have sort of a drawer appearance where they would slide open from the right edge of the page toward the center. HandleConfig.qml is the popup that is created and destroyed(and needing the animated transition added) when the instance is navIconBox Popup button is clicked

I am using Qt 5.1.1, Qt Quick 2.1, for embedded linux. thank you!

Here is the code:

@
main.qml

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import "Style.js" as Style
import "Theme.js" as Theme

Item {
id: root

Bg {                                //Basic rectangle setting the background color of the main screen
    id:bg
}

TitleBar {                          //TitleBar items
    id: titlebar
}

RowLayout {                         //Main row Layout for persistent block and tiles with content deleted for viewing on forum
}

Item {
       id: handlepop4
        y: 386
        x: 706
   height: 90
    width: 90
        z: 5
  opacity: enabled? 1: .3 //disabled state}

  property variant handle4;
            signal clicked4();

    NavIcon {
        id: navIcon4
        opacity: enabled? 1: .3 //disabled state}
        iconSource: "../images/icon_HandleConfig.png"
        height: 90
        width: 90
        iconBGColor: "blue"
        iconBGHeight: height
        iconBGWidth: width
        iconBGRadius: 5
    }

    MouseArea {
        anchors.fill: navIcon4
        onPressed: parent.opacity = 0.5
        onReleased: parent.opacity = 1
        onCanceled: parent.opacity = 1
        onClicked: {
            var component = Qt.createComponent("HandleConfig.qml");
            handlepop4.handle4 = component.createObject(root);
        }
    }
}

}
@

NavIcon.qml contains the basic icon and background rectangle for the button
@
NavIcon.qml

import QtQuick 2.1
import QtQuick.Controls 1.0

Item{
id: navIconBox
property alias iconSource: navIcon.source
property alias iconBGWidth: navRect.width
property alias iconBGHeight: navRect.height
property alias iconBGRadius: navRect.radius
property string iconBGColor: navRect.color

width: 100
height: 100

Rectangle {
    id: navRect
    width: 90
    height: 90
    radius: 5
    color: iconBGColor
//    Component.onCompleted: {Style.styleMenuPopBg(navRectHandle);}
}

Image {
    id: navIcon
    fillMode: Image.PreserveAspectFit
    anchors.centerIn: navRect
}

}

@

HandleConfig.qml is the popup itself that needs transition when created and then destroyed with the close button inside of it
@
HandleConfig.qml

import QtQuick 2.1
import QtQuick.Layouts 1.0
import "Style.js" as Style

Item {
id: popupMenuHandle
width: 400
height: 480
x: 400
opacity: enabled
z: 10

Rectangle {
    id: popupbgHandle
    width: popupMenuHandle.width
    height: popupMenuHandle.height
    anchors.fill: parent
    Component.onCompleted: {Style.styleMenuPopBg(popupbgHandle);}
}

Rectangle {
    id: closePopupHandle
    height: 50
    width: 50
    anchors.right: popupbgHandle.right
    opacity: enabled? 1: 0.3

    property variant win;
    signal clicked();

    MouseArea {
        anchors.fill: parent
        onPressed:  parent.opacity = 0.5 // down state
        onReleased: parent.opacity = 1
        onCanceled: parent.opacity = 1
        onClicked: {
            closePopupHandle.clicked(); // emit
            popupMenuHandle.destroy();
        }
    }
}

Text {
    id: closeIconHandle
    text: "X"
    anchors.horizontalCenter: closePopupHandle.horizontalCenter
    anchors.verticalCenter: closePopupHandle.verticalCenter
    font.pointSize: 40
    font.family: "Segoe UI"
    font.weight: Font.Light
    Component.onCompleted: {Style.styleCloseButtonIcon(closeIconHandle);}
}

}
@