title: QML components sequentially loading with fade
body: <p>I need sequentially to load one by one components from array.
  Before loading next component to Loader it should be fade-out , loaded and then fade-in. </p>
  
  <p>The code above blinks not correctly and show this message:
  "QML State: Binding loop detected for property "when"</p>
  
  <p>What have I done wrong?</p>
  
  <p>Thank you</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: screen
      width: 400
      height: 400
      color: "black"
  
      Rectangle {
          id: view
          anchors.fill: parent
  
          Loader {
              id: loader
              onLoaded: { view.state="fadeIn"; }
          }
  
          states: [
              State {
                  name: "fadeOut";
                  PropertyChanges { target: view; opacity: 0.1; }
              },
              State {
                  name: "fadeIn";
                  PropertyChanges { target: view; opacity: 1; }
              },
              State {
                  name: "load"; when: view.opacity == 0;
                  StateChangeScript { script: { loader.sourceComponent=com_array[index]; } }
              }
          ]
  
          transitions: [
              Transition {
                  to: "fadeIn"
                  NumberAnimation { properties: "opacity"; from: 0.0; to: 0.99; duration: 2000 }
              },
              Transition {
                  to: "fadeOut"
                  NumberAnimation { properties: "opacity"; from: 0.99; to: 0; duration: 2000 }
              }
          ]
      }
  
      Timer {
          id: timer
  
          interval: 3000; running: true; repeat: true
          onTriggered:  {
              ++index;
              if( index &gt;= com_array.length ) {
                  index = 0
              }
  
              view.state="fadeOut"
          }
      }
  
      // -------------------------------------------------------------------
      // Components
  
      Item {
          id: list
  
          property Component red_rect_com : Component {
              Rectangle {
                  width: screen.width; height: screen.height
  
                  Rectangle {
                      anchors.fill: parent; color: "red";
                  }
              }
          }
  
          property Component blue_rect_com : Component {
              Rectangle {
                  width: screen.width; height: screen.height
  
                  Rectangle {
                      anchors.fill: parent; color: "blue";
                  }
              }
          }
      }
  
      property int index: 0
      property var com_array: [ list.red_rect_com, list.blue_rect_com ]
      Component.onCompleted: { loader.sourceComponent = com_array[index]; }
  }
  </code></pre>
  
  <p><strong>UPD</strong></p>
  
  <p>Possible this could be useful for other, full example with correction ( thanks to answer author ):</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: screen
      width: 400
      height: 400
      color: "black"
  
      Rectangle {
          id: view
          anchors.fill: parent
          property var sourceComponent
          opacity: 0
  
          function loadComponent( component, is_first_start ) {
              sourceComponent = component;
  
              if( is_first_start ) {
                  fadeOut.stop(); fadeIn.start();
              }
              else {
                  fadeIn.stop(); fadeOut.start();
              }
          }
  
          Loader {
              id: loader
              onLoaded: {
                  fadeOut.stop();
                  fadeIn.start();
              }
          }
  
          NumberAnimation on opacity {
              id: fadeOut;
              to: 0.0;
              duration: 2000;
              onStopped: { loader.sourceComponent=view.sourceComponent; }
          }
  
          NumberAnimation on opacity {
              id: fadeIn;
              to: 1.0;
              duration: 2000
          }
      }
  
      Timer {
          id: timer
  
          interval: 4000; running: true; repeat: true
          onTriggered: {
              ++index;
              if( index &gt;= com_array.length ) {
                  index = 0
              }
  
              view.loadComponent( com_array[index], false );
          }
      }
  
      // -------------------------------------------------------------------
      // Components
  
      Item {
          id: list
  
          property Component red_rect_com : Component {
              Rectangle {
                  width: screen.width; height: screen.height
  
                  Rectangle {
                      anchors.fill: parent; color: "red";
                  }
              }
          }
  
          property Component blue_rect_com : Component {
              Rectangle {
                  width: screen.width; height: screen.height
  
                  Rectangle {
                      anchors.fill: parent; color: "blue";
                  }
              }
          }
      }
  
      property int index: 0
      property var com_array: [ list.red_rect_com, list.blue_rect_com ]
      Component.onCompleted: { view.loadComponent( com_array[index], true ); }
  }
  </code></pre>