Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved ListView - The add and remove animations remains sometimes stuck in the middle and leaves artifacts

    QML and Qt Quick
    listview animations add remove stuck
    1
    1
    418
    Loading More Posts
    • 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.
    • jeanmilost
      jeanmilost last edited by

      I'm working on a project containing a ListView component, and a header allowing to filter the items in the view. To render the display smooth, I also added add and remove animations. However these animations remains sometimes stuck in the middle and leave artifacts, especially when the text in the search area is modified quickly, as you can see on the following screenshot:

      f2b45345-1ecd-40bd-8204-eba180e0ecfd-image.png

      Here is the code I use for the animations:

      /**
      * Animated transition for added item
      */
      add: Transition
      {
          NumberAnimation { property: "m_Height"; from: 0; to: 38; duration: m_TransitionDuration }
      }
      
      /**
      * Animated transition for removed item
      */
      remove: Transition
      {
          NumberAnimation { property: "m_Height"; to: 0; duration: m_TransitionDuration }
      }
      
      /**
      * Animated transition for all items around an added/moved/removed item
      */
      displaced: Transition
      {
          NumberAnimation { property: "y"; duration: m_TransitionDuration; }
      
          // this is required to certify the height animation is well reset to its initial value on displaced
          NumberAnimation { property: "m_Height"; to: 38; }
      }
      

      I know that it's probably a good old and well known issue, but I cannot figure out what I'm doing wrong. According to this document the animation breaks should be handled with the displaced signal:
      https://doc.qt.io/qt-5/qml-qtquick-viewtransition.html#handling-interrupted-animations

      However, and as far as I know, I applied the directives described in this document, but without success. Can someone pointing me what I'm doing wrong?

      NOTE when I disable the above animations in my code, the artifacts no longer appear, so I assume that the issue comes from animations.

      1 Reply Last reply Reply Quote 0
      • First post
        Last post