This modules aims to provide a few components and helpers for an easier and more seamless integration of Ionic's composables or functions in your app. We currently have the one IonAnimation component.
IonAnimation componentThis component makes using Ionic's createAnimation easier. It matches the majority of props directly to the usual Ionic animation object, to make adoption easier.
For more information, see official Ionic docs or check out the playground examples
You can see how it replaces usage of the regular createAnimation function in the code example below:
<template>
<IonAnimation
:duration="3000"
:iterations="Infinity"
:keyframes="[
{ offset: 0, background: 'red' },
{ offset: 0.72, background: 'var(--background)' },
{ offset: 1, background: 'green' },
]"
playOnMount
>
<!-- Content to animate -->
</IonAnimation>
</template>
<script setup lang="ts">
// Template ref of your element
const squareRef = ref()
// Your animation object
const animation = createAnimation()
.addElement(squareRef.value)
.duration(3000)
.iterations(Infinity)
.keyframes([
{ offset: 0, background: 'red' },
{ offset: 0.72, background: 'var(--background)' },
{ offset: 1, background: 'green' },
])
onMounted(() => {
animation.play()
})
</script>
createAnimation by itself