Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Listview's populate animation has ViewTransition.index of -1?
Forum Updated to NodeBB v4.3 + New Features

[Solved] Listview's populate animation has ViewTransition.index of -1?

Scheduled Pinned Locked Moved QML and Qt Quick
listviewanimation
4 Posts 2 Posters 1.5k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Buttink
    wrote on last edited by Buttink
    #1

    Basically what the topic says. I want to do an effect much like the google material design spec here http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing . So I try to do something like this and it doesn't work.

    import QtQuick 2.4
    
    ListView {
        height: 600
        width: 800
        model: VisualItemModel {
            Rectangle { height: 50; width: 50; color: "red" }
            Rectangle { height: 50; width: 50; color: "blue" }
            Rectangle { height: 50; width: 50; color: "green" }
            Rectangle { height: 50; width: 50; color: "pink" }
            Rectangle { height: 50; width: 50; color: "purple" }
            Rectangle { height: 50; width: 50; color: "black" }
            Rectangle { height: 50; width: 50; color: "grey" }
        }
        populate: Transition {
            SequentialAnimation {
                ScriptAction { script: { console.log(ViewTransition.index); /* prints -1 */ } }
                PropertyAction { property: "scale"; value: 0; }
                PauseAnimation { duration: ViewTransition.index * 100 }
                NumberAnimation { duration: 500; properties: "scale"; from: 0; to: 1;}
            }
        }
    }
    

    Anyone got an idea?

    p3c0P 1 Reply Last reply
    0
    • B Buttink

      Basically what the topic says. I want to do an effect much like the google material design spec here http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing . So I try to do something like this and it doesn't work.

      import QtQuick 2.4
      
      ListView {
          height: 600
          width: 800
          model: VisualItemModel {
              Rectangle { height: 50; width: 50; color: "red" }
              Rectangle { height: 50; width: 50; color: "blue" }
              Rectangle { height: 50; width: 50; color: "green" }
              Rectangle { height: 50; width: 50; color: "pink" }
              Rectangle { height: 50; width: 50; color: "purple" }
              Rectangle { height: 50; width: 50; color: "black" }
              Rectangle { height: 50; width: 50; color: "grey" }
          }
          populate: Transition {
              SequentialAnimation {
                  ScriptAction { script: { console.log(ViewTransition.index); /* prints -1 */ } }
                  PropertyAction { property: "scale"; value: 0; }
                  PauseAnimation { duration: ViewTransition.index * 100 }
                  NumberAnimation { duration: 500; properties: "scale"; from: 0; to: 1;}
              }
          }
      }
      

      Anyone got an idea?

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      @Buttink Specify an id to Transition and then access its property

      populate: Transition {
              id: transition
              SequentialAnimation {
                  ScriptAction { script: { console.log(transition.ViewTransition.index); /* prints -1 */ } }
                  PropertyAction { property: "scale"; value: 0; }
                  PauseAnimation { duration: transition.ViewTransition.index * 100 }
                  NumberAnimation { duration: 500; properties: "scale"; from: 0; to: 1;}
              }
          }
      

      157

      B 1 Reply Last reply
      0
      • p3c0P p3c0

        @Buttink Specify an id to Transition and then access its property

        populate: Transition {
                id: transition
                SequentialAnimation {
                    ScriptAction { script: { console.log(transition.ViewTransition.index); /* prints -1 */ } }
                    PropertyAction { property: "scale"; value: 0; }
                    PauseAnimation { duration: transition.ViewTransition.index * 100 }
                    NumberAnimation { duration: 500; properties: "scale"; from: 0; to: 1;}
                }
            }
        
        B Offline
        B Offline
        Buttink
        wrote on last edited by
        #3

        @p3c0 So I was just accessing a random attached property on the Action, not the ViewTransition attached property that was set by the grid view? Weird I was expecting a undefined if i accessed the wrong item.

        p3c0P 1 Reply Last reply
        0
        • B Buttink

          @p3c0 So I was just accessing a random attached property on the Action, not the ViewTransition attached property that was set by the grid view? Weird I was expecting a undefined if i accessed the wrong item.

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by p3c0
          #4

          @Buttink The attached properties are not always directly accessible by the children. It is documented here.
          It states:

          A common error is to assume that attached properties and signal handlers are directly accessible from the children of the object to which these attributes have been attached. This is not the case. The instance of the attaching type is only attached to specific objects, not to the object and all of its children.

          Check out the example provided there.

          157

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved