Vue中动画的使用
在Vue中动画的实现有三种方式,具体如下所示:
- 使用过渡类名实现动画(具体代码如下)
1. 使用 transition元素,把需要被动画控制的元素,包裹起来
<div id="app">
<input type="button" value="动画" @click="flag=!flag">
<transition>
<p v-if="flag">Vue中过渡类名实现动画</p>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {}
})
</script>
2. 其次在style标签中需要设置两组样式
<style>
.v-enter,
.v-leave-to {
transform: translateX(100px);
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 1s;
}
</style>
- 使用第三方类实现动画(animate.css)
<link rel="stylesheet" href="animate.css">
<div id="app">
<input type="button" value="动画" @click="flag=!flag">
<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
<p v-if="flag" class="animated">Vue中过渡类名实现动画</p> <!-- class="animated"一定要设置 -->
</transition>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {}
})
</script>
- 使用钩子函数实现半场动画
1.使用transition把需要动画的元素包裹起来
<div id="app">
<input type="button" value="动画" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
1. 设置方法实现动画
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false;
},
methods: {
beforeEnter(el){
el.style.transform = "translate(0, 0)";
},
enter(el, done){
el.offsetWidth
el.style.transform = "translate(150px, 450px)";
el.style.transition = 'all 1s';
done();
},
afterEnter(el){
this.flag = !this.flag;
}
}
});
</script>
- 想要了解更多,请查看官方文档 Vue动画官方文档