feat: ionic animation component

[Lexpeartha]

🆒 Your use case

Ionic recommends usage of it's own utilities for animations for inclusive platform compatibility and making sure custom animations don't interfere with route popping/pushing animations, so it would be convenient if nuxt-ionic could provide a component that will easily handle all this

Check official docs here

🆕 The solution you'd like

Ionic team already made something similar for react, and it could be a decent starting point:

<CreateAnimation
  duration={1000}
  fromTo={{
    property: 'opacity',
    fromValue: '1',
    toValue: '0.5'
  }}
>
...
</CreateAnimation>

Specific props and their handling is up to debate, but I reckon something like this could work

🔍 Alternatives you've considered

No response

ℹ️ Additional info

Would be more than happy to work on a PR if I receive a green light 😄

[danielroe]

Sounds nice to me! Would be worth looking into how/whether to integrate with the native Transition element from Vue. We will also need to turn off pageTransition and layoutTransition within the Nuxt pages integration - see nuxt/nuxt#14265 which will make this easier.

[Lexpeartha]

Hm, based on documentation I think this implementation was made as replacement for Transition, assuming based on docs:

Ionic Animations uses the Web Animations API to build and run your animations. In doing this, we offload all work required to compute and run your animations to the browser. As a result, this allows the browser to make any optimizations it needs and ensures your animations run as smoothly as possible. While most browsers support a basic implementation of Web Animations, we fallback to CSS Animations for browsers that do not support Web Animations. The performance difference in switching between these two should typically be negligible.

Also in vue examples they are passing element ref to the animation function, so I don't think there's space for native Transition component in here. However managing page and layout transition with custom component certainly sounds interesting!

[Lexpeartha]

Made component that should be very similar to React's implementation. But I would appreciate feddback

Also it can still use some improvements, for example it could have playOnVisible and play it only when intersection observer tells that element is on screen