Implementation of Animations API

Ionic Framework Ionic Vue
1

Hi,

I seem to be often struggling with applying certain additional Ionic API’s to my codebase.
At this moment I’m trying out the basics of the new Animations API, but I cannot even get the simplest example to work.

Does anyone know what I do wrong?

<template>
 <ion-page>
   <ion-content fullscreen>
     <div ref="pages" class="pages">
       Pages
     </div>
   </ion-content>
 </ion-page>
</template>

<script lang="ts">
import { IonContent, IonPage, createAnimation } from '@ionic/vue'
import { ref, onMounted, defineComponent } from 'vue'
export default defineComponent({
 name: 'Editor',
 components: {
   IonPage,
   IonContent,
 },
 setup(){
   const pages = ref()
   const animation = createAnimation()
     .addElement(pages.value)
     .duration(1500)
     .iterations(Infinity)
     .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
     .fromTo('opacity', '1', '0.2')    

   onMounted(() => {
     animation.play()
   })

   return { pages }
 },
})
</script>
2

If you log animation.elements you should see that the array is empty. When setup is executed, the component instance has not been created yet. In other words, your ref has not been defined at the moment you create the animation.

Try moving the animation setup inside of onMounted or onIonViewDidEnter (an Ionic-specific lifecycle hook: Vue Lifecycle - Ionic Documentation)

1 Like