Animation triggered with dynamic content with "appear-visible" attribute

[florian-lefebvre]

Hi, I'm using Vue in my project.
I'm using appear-visible on a section (called "Un projet réalisé par des bénévoles") of https://ynotes.fr. There is a list using v-for of contributors that is fetched, but it triggers the animation before seing the section, so the fade animation doesn't play at the right moment.
I'm managing that here: https://github.com/ModernChocolate/ynotes-website/blob/develop/components/HomeSections/Contributors.vue#L40
I don't know how to prevent the animation of the section from playing before it is visible despite dynamic elements.

[milesingrams]

Interesting. So what I think might be happening is related to duration="auto". Basically the way duration="auto" works is to count how many .xyz-nested or .xyz-{mode}-nested elements and run until they finish animating. However in this case it is counting 0 nested elements since the content is dynamic and loads after it counts on page load. Perhaps try using an explicit duration for that section such as :duration="3000" as long as it is long enough to cover all nested content animations it should work fine. Let me know how it works out!

<XyzTransition appear-visible :duration="3000">

[milesingrams]

In the future I should try to find a way to detect addition and removal of nested elements. However I'm afraid any MutationObserver implementation might have a large performance cost for little gain.

[florian-lefebvre]

Your solution doesn't work, but that's not a big problem. Should I open an issue for that?

[mattaningram]

Go for it! Hopefully we can come up with a solution that is performant or at least give users a warning in docs about it.