Vue中使⽤transition标签实现动画的4种⽅法（⼋）⽂章⽬录
⼀、Vue中的过度动画(⽆name属性的transition)
vue提供了⼀个过渡动画的标签transition:
1.只能对⼀个元素有效
2.主要是给v-if(v-show)或动态组件，在切换的时候添加动态效果.
动画进⼊前的三个类 1. .v-enter 2…v-enter-active 3…v-enter-to (1.进⼊,2.进⼊过程,3.进⼊后)
动画离开的是哪个类 1. .v-leave 2…v-leave-active 3…v-leave-to (1.离开 2.离开过程 3.离开后)
CSS样式如下:
<style>
.div {
width:200px;
height:200px;
background-color: antiquewhite;
}
/* 添加过渡效果 */
/* 元素显⽰/⼊场的时候 */
.v-enter {
/* 元素在⼊场开始的样式 */
opacity:0;
height:0;
}
.v-enter-active {
/
* 元素⼊场进⾏时的样式设置过度的时间*/            transition: all 3s;
}
.v-enter-to {
/* 元素在⼊场结束的样式 */
opacity:1;
height:200px;
}
/* 元素隐藏/离场的时候 */
.v-leave {
/* 元素隐藏的开始的时候 */
opacity:1;
height:200px;
}
.v-leave-active {
/* 元素隐藏的过程 */
transition: all 3s;
}
.v-leave-to {
/* 元素隐藏的结束的时候 */
opacity:0;
height:0px;
}
.
div2 {
width:200px;
height:200px;
background-color: blue;
}
</style>
DOM结构如下:
<div id="app">
<button @click="show=!show">show/hide</button>
<!-- 第⼀个transition -->
<transition>
<div v-show='show' class="div">淡⼊淡出的效果</div>
</transition>
</div>
JS代码如下
<script>
//创建实例
var app =new Vue({
el:'#app',
data:{
show:false
},
})
</script>
⼆、Vue中的过度动画(有name属性的transition) CSS类的样式实现
/* 其中样式相同的transition类可以进⾏和并 */
.fade-enter,
.fade-leave-to {
transform:translateX(400px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 3s;
}
.fade-enter-to,rotate属性
.fade-leave {
transform:translateX(0px);
}
tansition标签添加动画的标签
<div id="app">
<!-- vue提供了⼀个过渡动画的标签transition:
1.只能对⼀个元素有效
2.主要是给v-if(v-show)或动态组件，在切换的时候添加动态效果.  -->
<button @click="show=!show">show/hide</button>
<!-- 第⼆个transition: name属性可以区分不同元素的过度动画-->
<transition name="fade">
<div v-show='show' class="div2">淡⼊淡出的效果</div>
</transition>
</div>
JavaScript代码
<script>
var app =new Vue({
el:'#app',
data:{
show:false
},
})
</script>
三、Vue中的关键帧动画
CSS样式如下:
<style>
@keyframes leaveAnimation{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(-90deg);
}
100%{
transform:translate(-100px, 0)rotate(-90deg);
}
}
/*添加animation动画的类*/
.leaveAni{
animation: leaveAnimation 3s;
}
@keyframes enterAnimation{
0%{
transform:translate(-100px, 0)rotate(-90deg);
}
50%{
transform:rotate(-90deg);
}
100%{
transform:translate(0, 0)rotate(0deg);
}
}
/*添加animation动画的类*/
.
enterAni{
animation: enterAnimation 2s;
}
.d1{
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
DOM结构如下
<div id="app">
<input type="checkbox" v-model="show">
<transition enter-active-class="enterAni" leave-active-class="leaveAni">
<!-- enter-active-class="" 元素⼊场的动画类  leave-active-class="" 元素离场的动画类--> <div v-show='show' class="d1">4654654</div>
</transition>
</div>
JS代码
<script>
var app =new Vue({
el:'#app',
data:{
show:false
},
})
</script>
四、vue中的js动画

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。