flip How to solve the problem of creating DOM elements without styles when using Flip animations in nuxt3

[Snorlax]

Hello  team,I hope to use Flip in Nuxt3 to achieve a caterpillar effect,so here my code: https://codesandbox.io/p/devbox/flip-nuxt3-dd792k

This example was copied from the official demo:

See the Pen Yzdzxem by GreenSock (@GreenSock) on CodePen.

but the difference is that I used the Nuxt3(Vue3). But the result was not as expected, the newly generated DOM elements had no style like below.

I have thought that maybe I should not manipulate DOM in Vue, but if I only change responsive data, then it only changes the order of data and does not display Flip animations.

So where did I go wrong?Thanks!

 

 

 

See the Pen flip-nuxt3-dd792k by p (@p) on CodePen.

[Cassie]

Hiya!

 

I haven't seen this before but it seems like it's an issue with dynamic content not inheriting scoped styles

https://stackoverflow.com/questions/43052364/vue-js-how-can-i-make-dynamically-created-html-use-scoped-css

 

Quote

Dynamically Generated Content

DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

There doesn't appear to be a VueJS specific way of doing it. It sounds like your best option is to either style in-line in your highlight function's output, or use a global class.

This isn't a GSAP thing I'm afraid so I can't offer much more assistance here

Good luck

[Rodrigo]

Hi,

 

As Cassie mentions this is related to the styling of the cards being scoped and the  fact that you're manipulating the DOM directly. You can either use a global style for just those elements in a global styles file, which shouldn't be too costly, or you can update the DOM using a reactive property in order to force a re-render and add the elements using Vue instead and then the scoped styles would work as expected.

 

Regardless of the route you end up choosing, I would strongly recommend you to not update your DOM like you're doing it now, since any other re-render up the component tree could reset your DOM to what it was before you used the click method.

 

Happy Tweening!

[Snorlax]

Thank you very much. Inspired by you, I have successfully found a solution to this problem.

 

The first one is that, following Cassie's guidance, I learned to use Flip to manipulate DOM. In this case, I need to use a depth selector to solve the problem that the DOM elements generated by Flip do not enjoy the scope style of Vue.Just need to add " :deep".

 

The second option, as Rodrigo mentioned, is not recommended to operate DOM in Vue, so I changed the method and used Flip for sorting without involving DOM addition and deletion. In this case, I don't need to use a depth selector, but the only flaw is that its animation effect is not what I most want.