title: Enter and Leave animation in QML
body: <p>In my qml application there is content area "Item" and it have a "loader" for load qml file. </p>
  
  <p>I want to implement leave and enter animation effect</p>
  
  <p>For example my current source of loader is "First.qml" when i set source other qml file(second.qml). "First.qml" should fade out and "second.qml" will be fade in.</p>
  
  <p>How should i achieve this? </p>
  
  <p>I tried following code it animate only the second.qml. When we set source "first.qml" disappears. I want to give a fadeout animation to intial qml also ("first.qml")</p>
  
  <pre><code> Loader{
              id:contentLoader
              source: "First.qml"
  
              onSourceChanged: animation.running = true
  
                      NumberAnimation {
                          id: animation
                          target: contentLoader.item
                          property: "opacity"
                          from: 0
                          to: 1
                          duration: 1000
                          easing.type: Easing.bezierCurve
                      }
  
          }
  //button click
   Button{
                      text:modelData
                      width:100
                      height: parent.height
  
                      onClicked: {
  
                           contentLoader.setSource("Second.qml")
  
  
                      }
  
  
                  }
  </code></pre>