AnimXYZ Vue3 integration broken with Vue 3.1.1

[DoradoFlamingo]

I just noticed that trying to work with the elements is broken in the latest variant of Vue 3.1.1.

In 3.0.5 you can see the element working with xyz-in/out classes, but with Vue 3.1.1 they seem to be overridden back to Vue's standard classes using v-enter-from/to so the css animations do not work. If you write down the classes such as xyz-in manually then the animations work nicely but defeats the purpose of working with Vue3.

What I did to reproduce this:

• Set up a new app using vite npm init @vitejs/app
• Selected a vue-ts app
• npm i -Added AnimXyz packages
• Set up Vue3 to use VueAnimXyz
• Animations broken if you try to fade something like the vue logo in App.vue
• Now force package.json to download Vue 3.0.5
• Animations work without changing the Vue template

[milesingrams]

Hi DoradoFlamingo, thank you for finding this bug! Since Vue 3 is still relatively new it looks like they are changing things fairly frequently. In this case it seems like they recently changed the way undefined transition props/attributes are handled in a way that causes the empty base props to override the AnimXYZ specific props. It was a simple fix on my end. You should be able to use the latest version of Vue 3 with the latest release of @animxyz/vue3 (0.6.0). Let me know if this still causes an issue for you and I will investigate further.

Hope you are enjoying our library and keep on animating!

[DoradoFlamingo]

Yep that did the trick, cheers! Your library has been super useful for prototyping site concepts 😁