Install
$ npm install --save vue-animejs
Import
import VueAnime from 'vue-animejs';
Vue.use(VueAnime)
Usage
Adds a simple directive named
v-animethat passes all arguments directly to anime.js
<div v-anime="{ rotate: '1turn', backgroundColor: '#FFF', duration: 2000, loop: true }"><div>
Also adds this.$anime to your components.
Examples:
Example 1:
export default {
name: "my-component",
data() {
return {};
},
mounted() {
this.$anime(/* ... animate something ... */)
},
}
Example 2:
export default {
name: "my-component",
data() {
return {};
},
mounted() {
const targets = this.$el;
this
.$anime
.timeline()
.add({
targets,
translateX: 250,
easing: 'easeOutExpo',
})
.add({
targets,
translateX: 250,
easing: 'easeOutExpo',
});
/* ... etc ... */
},
}
