Subject: Request for Assistance Regarding Residual Style Element from @vueuse/motion's Animation

[a2734961]

Dear experts at @vueuse/motion,

I hope this message finds you well. I wanted to begin by expressing my admiration for your outstanding animation library. It has been a valuable asset in my projects. However, I am currently facing an issue that has been causing me some considerable trouble.

When applying the v-motion directive to a target div, it leaves behind a style property: transform: translateZ(0px);. This will make all fixed objects inside the div element ineffective!

I would like to kindly suggest that, after the animation is completed, the library automatically removes this style element. Since the animation has concluded, there should be no need for any residual style elements to be left behind on the target div.

I appreciate your time and attention to this matter. Your support and consideration would be greatly appreciated in resolving this issue. Thank you for your excellent work, and I look forward to your response.

Best regards！

The motion has ended

[nathan-de-pachtere]

@a2734961 Any solution found on your side ?

[NoelDeMartin]

This looks like a bug, but in case it's useful to someone, this is how I solved it in my project:

[style="transform: translateZ(0px);"],
[style="transform: translateZ(0px); opacity: 1;"] {
    transform: none !important;
}

Yes, I know it's a bit rough 😅. But I don't know enough about the internals of the library to make sure what's happening, and this gets the job done.

[nathan-de-pachtere]

@NoelDeMartin Scary stuff you share ! 😱 Thanks for that, we just moved to pure CSS.