最近我整理了一下vue2的一些过渡效果。来总结到这里。
vue 为我们封装了transition 组件 ,可以给任何元素添加enter 和leave
条件渲染 : v-if
条件展示 :v-show
动态组件
组件根节点
组件中 ,过渡有四个状态 HTML
<div id="myDiv">
<button @click="show = !show">点击查看变化button>
<transition name="fade"> //fade 名字是可以更换的
<div v-if="show">
请看我的变化
div>
transition>
div>
CSS
.fade-enter-active,.fade-leave-active {
transition: all 1s linear;
}
.fade-enter,.fade-leave-active {
opacity: 0;
transform:translateX(50px);
}
javascript
new Vue({
el:"#myDiv",
data:{
show:true
}
})
3.我们也可以设置css动画
只需要将上变得css代码改为
.fade-enter-active{
animation:Ado .5s ease-in;
}
@keyframes Ado{
0%{transform:scale(0.5,0.5);}
60%{transform:scale(1,1);}
80%{transform:scale(1.5,1.5);}
100%{transform:scale(1,1);}
}
.fade-leave-active{
animation:Bdo .5s ease-in;
}
@keyframes Bdo{
0%{transform:scale(1,1);}
60%{transform:scale(1.5,1.5);}
80%{transform:scale(1,1);}
100%{transform:scale(0.5,0.5);}
}
4.自定义过渡类
自定义过渡类就不需要 中的name属性了。类名可以是自己随意起,也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性
enter-class=类名
enter-active-class=类名 (常用)
leave-class=类名
leave-active-class=类名 (常用)
在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类, 在添加 动画类名,例如:
enter-class=”animated hinge “
CSS
.achange{
animation:Ado .5s ease-in;
}
@keyframes Ado{
0%{transform:scale(0.5,0.5);}
60%{transform:scale(1,1);}
80%{transform:scale(1.5,1.5);}
100%{transform:scale(1,1);}
}
HTML
<div id="myDiv">
<button @click="show = !show">点击我button>
<transition
leave-active-class="achange"
enter-active-class="animated hinge"
>
<p v-if="show">看我的变化p>
transition>
div>
JavaScript
new Vue({
el:"#myDiv",
data:{
show:true
}
})
5.JavaScript 过渡 钩子
① before-enter
② enter
③ after-enter
④ enter-cancelled (在 v-show 中应用)
⑤ before-leave
⑥ leave
⑦ after-leave
⑧ leave-cancelled (在 v-show 中应用)
当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。
否则,它们会被同步调用,过渡会立即完成。
例如
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
1.实现多个元素过渡用
① v-if 和 v-else 或 v-else-if (两个相邻元素要求不一样)
省略了CSS
<button @click="show = !show">点击查看变化button>
<transition name="fade">
<div v-if="show">
请看我的变化div
div>
<p v-else="fade">我也会变化ppppp>
transition>
div>
<script>
new Vue({
el:"#myDivB",
data:{
show:true
}
})
script>
② 利用 属性 key (推荐)
<button @click="show = !show">点击查看变化button>
<transition name="fade">
<div key="show">
{{show? first : last}}
div>
transition>
div>
<script>
new Vue({
el:"#myDivB",
data:{
show:true
}
})
script>
③ v-if 和 key属性 混合使用
<div id="myDivC">
<button @click="showa">点击查看变化button>
<transition name="fade">
<div v-if="show == 'one'" key="one">
oneoneoneone
div>
<div v-if="show == 'two'" key="two">
twotwotwotwo
div>
<div v-if="show == 'three'" key="three">
threethreethree
div>
transition>
div>
<script>
new Vue({
el:"#myDivC",
data:{
show:'one'
},
methods:{
showa:function (){
if(this.show == 'one'){
return this.show = 'two';
}else if(this.show == 'two'){
return this.show = 'three';
}else{
return this.show = 'one';
}
}
}
})
script>
2.过渡模式
在多个元素过渡时,这些元素会同时出发,vue 提供了两个属性,在 中加入 mode 属性,它有两个值
in-out: 新元素先进行过渡,完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡,完成之后新元素过渡进入。
1.多组件过渡,利用 is 属性
CSS
.fade-enter-active,.fade-leave-active {
transition: all 1s linear;
}
.fade-enter,.fade-leave-active {
opacity: 0;
transform:translateX(50px);
}
HTML
<div id="myDiv">
<button @click="show">点击查看变化button>
<transition name="fade" mode = "out-in">
<component :is="view">component>
transition>
div>
JavaScript
new Vue({
el:"#myDiv",
data:{
view:"a-view",
},
components: {
"a-view":{
template:"我是第一个模板"
},
"b-view":{
template:"我是第二个模板"
}
},
methods:{
show:function(){
this.view = this.view == "a-view"?"b-view":"a-view";
}
}
})
列表的过渡需要用 v-for 和
组件
注意:
① 列表
在页面渲染出来是个 span 标签, 如果你想更改它用 tag 属性。例如
渲染出来就是div
② 列表在循环时 要给每一个列表项添加唯一的key 属性值。这样列表才会有过渡效果
直接上代码说明:
CSS
引入animate.css
span{
display:inline-block;
padding:10px;
}
.position{position: absolute;} //这个是当列表离开是要添加的类,如果不给定位,列表某个元素离开后依然占位,是不会有过渡的。
.list-complete-item{transition:all .3s linear;}
//给列表的过渡
HTML
<div id="myDiv">
<button @click="add">随机增加数字button>
<button @click="remvoed">随机删除数字button>
<button @click="suffle">随机排序button>
<transition-group tag="div"
name="flip-list"
enter-active-class="animated bounceInUp position"
leave-active-class="animated bounceOutDown position"
>
<span v-for="item in list" :key="item" class="list-complete-item">{{item}}span>
transition-group>
div>
JavaScript
引入lodash.min.js 实现随机排序
new Vue({
el:"#myDiv",
data:{ //这里写代码片
list:[1,2,3,4,5],
addNumber:5
},
methods:{
randomIndex:function(){ //随机插入的位置
return Math.floor(Math.random()*this.list.length);
},
add:function(){
this.list.splice(this.randomIndex(),0,++this.addNumber)
},
remvoed:function(){
this.list.splice(this.randomIndex(),1);
},
suffle:function(){
this.list = _.shuffle(this.list)
}
}
})
中加入apper ,页面会在加载时渲染并进行过渡