Component View with transaction in QML - qt

Question

I tries to implement View, which rendering some Component and on change source Component plays fadeout/fadein animation.
My code:
import QtQuick 2.1
Item {
id: componentViewRoot
onOpacityChanged: console.log(opacity)
property Component source: null
PropertyAnimation {
id: fadeout
target: componentViewRoot;
alwaysRunToEnd: true
property: "opacity";
to: 0;
duration: 1000
}
PropertyAnimation {
id: fadein
target: componentViewRoot;
alwaysRunToEnd: true
property: "opacity";
to: 1;
duration: 1000
}
onSourceChanged: {
fadeout.start()
loader.sourceComponent = source;
}
Loader{
id:loader
anchors.fill: parent
onLoaded: fadein.start()
}
}
But it not working (don't plays animation) properly.
Please help me.
UDP:
I want use this View like StackView from QtQuick.Controls without depth.
Some code:
Rectangle {
id: mainObjectRoot
implicitHeight: 440
implicitWidth: 720
color: "#f8f8f8"
ComponentView{
id: compView
height: 265
width: 680
onXChanged: console.log("compView"+x)
onYChanged: console.log("compView"+y)
anchors.right: parent.right
anchors.rightMargin: 20
anchors.bottom: parent.bottom
anchors.bottomMargin: 45
anchors.top: parent.top
anchors.topMargin: 130
anchors.left: parent.left
anchors.leftMargin: 20
source: passwordView
}
Connections{
target: sessionManager
onRequiredPasswordChanged :{
if(sessionManager.requiredPassword){
compView.source = passwordView
}
else{
compView.source = mainview
}
}
}
Component {
id: passwordView
PasswordView{
}
}
Component {
id: helpview
HelpView{
}
}
Component{
id: mainview
MainView{
}
}
Component{
id: settingsview
SettingsView{
}
}
In my example code I want to play transition animation on compView.source changed

Answer 1

For now I was
#ComponentView.qml:
import QtQuick 2.1
Item {
id: componentViewRoot
//#source for setting
property Component source: null
//#item for acces rendering item
property alias item: loader.item
function __changeItem(component){
anim._component = component
anim.start()
}
SequentialAnimation {
id:anim
property Component _component: null
NumberAnimation {
id: fadeout
target: componentViewRoot
alwaysRunToEnd: true
property: "opacity"
from : 1
to: 0
}
PropertyAction{
target: loader
property: "sourceComponent"
value: anim._component
}
NumberAnimation {
id: fadein
target: componentViewRoot
alwaysRunToEnd: true
property: "opacity"
from : 0
to: 1
}
}
onSourceChanged: {
__changeItem(source)
}
Loader{
id:loader
anchors.fill: parent
}
}