title: Animating height
body: <p>I want to show/hide an element by modifying it's <code>height</code>. Here is an example code showing my issue: </p>
  
  <pre><code>import QtQuick 2.4
  import QtQuick.Window 2.2
  import QtQuick.Layouts 1.1
  import QtQuick.Controls 1.4
  
  Window {
      id: win
      width: 300
      height: 300
      visible: true
  
      ColumnLayout {
          width: parent ? parent.width : 200
  
  
          Switch {
              id: someswitch
              Layout.alignment: Qt.AlignCenter
          }
  
          Label {
              id: myText
              text: "dummy"
              height: 0
  
              wrapMode: Text.WordWrap
              clip: true
              Layout.fillWidth: true
              Layout.alignment: Qt.AlignCenter
  
              states: State {
                  name: "visible"
                  when: someswitch.checked
                  PropertyChanges { target: myText; height: implicitHeight }
              }
  
              Behavior on height {
                  NumberAnimation { duration: 100 }
              }
          }
      }
  }
  </code></pre>
  
  <p>I didn't add a <code>Transition</code>/<code>Animation</code> yet, but the behavior is already wrong on this stage. <code>someswitch</code> is unchecked by default but the text is shown. On the other hand, after checking the switch, the text hides and never appears back.</p>
  
  <p>How should I handle that? I'd like the text to "slide out". I don't want to change its <code>opacity</code>.</p>