Adding Vuejs Anime components to Vue Cli

Question

I am new to vuejs animation. In my webpage, I want to add a sample Vue-Anime components sample components to my current Vue CLI project. After I installed the vue-animejs.

I used the template code. How can I use this template in order to make it work? Please help.

<template>
  <div v-anime="{ rotate: '1turn', backgroundColor: '#ffffff', duration: 2000, loop: true }"></div>
</template>

export default {
 name: "my-component",
 data() {
 return {};
 },
 mounted() {
  this.$anime(/* ... animate something ... */)
 },
}

@li-x The title was correct. The OP is asking how to integrate a specific plugin, not generic animation. — zero298
@zero298, oh, so it is like entry code to let people know how to make the entire animation library work. — dlfjj

bighi bighi · Accepted Answer · 2018-08-06T22:59:18

Please refer to the project's Github page for more information. The readme gives an idea of how to get started.

https://github.com/BenAHammond/vue-anime

Below is another example (mostly taken from the anime.js Github page)

Place the below in your template:

<div v-anime="{ translateX: 100, duration: 2000, loop: true, direction: 'reverse', autoplay: true }">
O
</div>

In short, anything to be animated, you would either provide it to the v-anime directive in your template or this.$anime() function in your component script.

Adding Vuejs Anime components to Vue Cli

1 Answers