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

jeanmilost

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:

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.