第一种方法：引入类名
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 1s;
}
第二种方法：通过钩子函数
在transition标签里面添加
v-bind:before-enter="beforeEnter"
v-bind:enter="enter"
v-bind:after-enter="afterEnter"
在vue得methods中创建过渡动画
注意点
- 这种方法他还是会默认寻找类名，所以需要添加v-bind:css="false"
- 通过钩子函数这种方法，再enter时候必须要添加el.offsetHeight或者el.offsetWidth，不然没有动画效果
- 如果想要已进入页面就执行动画，那么需要添加done回调函数，不然不会往下执行，并且需要延迟执行done
- 可以修改name属性来修改前缀v-
第三种方法：利用Velocity
第一步引用velocity（<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>)
第二步创建钩子函数，找到enter，在enter里面构建动画。例：Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000); done();
第四种方法通过自定义类名，引入animate.css
在transition标签中利用：
- enter-class=""
- enter-active-class=""
- enter-to-class=""
- leave-class=""
- leave-active-class=""
- leave-to-class=""
后面的函数名可自定义，也可以引用animate.css
<style>
*{
margin: 0;
padding: 0;
}
.app{
width: 200px;
height: 200px;
background: red;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="demo">
<button @click="isShow">toggle</button>
<transition appear
enter-class=""
enter-active-class="animated bounceInRight"
enter-to-class=""
>
<div class="app" v-show="show"></div>
</transition>
</div>
<script>
let vue = new Vue({
el: "#demo",
data: {
show: true,
},
methods: {
isShow(){
this.show = !this.show;
}
}
})
</script>
注意点
动态渲染界面时，要给动态更新的元素添加过度动画，那么不能使用transition，而要使用transition-group标签
transition-group标签会在动态渲染界面时，将所有元素放在span中。再标签中添加tag="ul"自定义
