transition组件
transition组件 用于控制元素、组件的显示消失 切换等效果
三个状态
一、入场(从消失到显示)
vue会自动加上类名 v-enter
中间 vue会自动加上类名 v-enter-active
二、默认显示状态
三、出场(从显示到消失)
中间vue会自动加上类名 v-leave-active
最后vue会自动加上类名 v-leave-to
使用transition组件包裹需要切换的组件或元素,通过操作类名来完成过渡与动画的效果(此时其实就是在css里面写效果)
css代码
<style>
.box{
width: 200px;
height: 200px;
background-color: blueviolet;
margin: 50px auto;
}
//控制的是消失到显示 沿着x轴向左位移600px 旋转360度
.animation-enter{
opacity: 0;
transform: translateX(-600px) rotate(360deg);
}
.animation-enter-active,.animation-leave-active{
transition:all 2s
}
//控制的是显示到消失 沿着y轴向下位移300px 旋转360度
.animation-leave-to{
opacity: 0;
transform:translateY(300px) scale(0.1)
}
</style>
html代码
<body>
<div id="app">
<button @click="isShow = !isShow">
{{ isShow?"隐藏":"显示" }}
</button>
//这里一定要用transition这个组件包裹住要做过渡或者动画的元素
<transition name="animation">
<div class="box" v-show="isShow">
</transition>
</div>
</div>
</body>
js代码
<script>
let vm= new Vue({
el:'#app',
data: {
isShow: false
}
})
</script>
注意:
- transition 组件 只能控制 单个元素动画
- 使用v-if v-else-if v-else 多个平行,可以控制(但是单个元素,同时只显示一个)
注意: 如果v-if控制的是相同标签的元素,那么每个元素必须添加key,不然更新虚拟dom时,实际上只是更改了元素的类名 - 通过v-if v-else 的动画,需要定义mode属性
out-in (常用的) 当前元素先进行过渡,完成之后新元素过渡进入
in-outs 新元素先进行过渡,完成后当前元素过渡进入<transition name="animation" mode="out-in"> <div class="box" v-if="isShow"></div> <div class="box2" v-else></div> </transition>
transition结合动画
transition结合自定义动画
<style>
@keyframes animation1 {
0%{
transform: translateX(-500px) rotate(720deg);
}
25%{
transform: translateX(-200px) rotate(360deg);
}
50%{
transform: translateX(-200px) rotate(360deg) scale(2);
}
75%{
transform: translateX(-200px) translateY(-200px) rotate(180deg) scale(1);
}
100%{
transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
}
}
.box{
width: 200px;
height: 200px;
background-color: blueviolet;
margin: 50px auto;
}
.animation-enter-active{
//animation(复合属性): 动画名称,持续时间,延迟时间,运动类型,次数,顺序
animation:animation1 3s;
}
.animation-leave-active{
animation:animation1 3s;
}
</style>
transition 结合animate.css动画库
下载别人写好的css文件
引入 animate.css就OK
animation:
name(动画名称)
duration(持续时间)
delay(延迟时间)
animation-count(次数) n / infinite
animation-direction(动画方向) normal / reverse /alternate /alternate-reverse
animation-fill-mode(动画的填充模式) forward / backward / both
animation-play-state(控制动画的开始暂停)
示例
<link rel="stylesheet" href="./animate.css">//引入css文件
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
/*
在 enter 和 leave 的动画效果里 用的其实是别人写好的动画效果
入场:找 entrances的效果
出场:找exits的效果
*/
.animation-enter-active{
animation:1s zoomInDown;
}
.animation-leave-active{
animation:1s zoomPutDown;
}
</style>
transition-group组件
用来做列表动画
使用:直接使用transition-group组件包裹多个元素
<transition-group >
<li></li>
<li></li>
<li></li>
</transition-group>