vue 元素动画过渡效果
2017-06-30 本文已影响1425人
rayman_v
1. 在 vue 中，使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前，会先判断是否有对应的 class 样式能匹配到该子元素上：
<script src="/public/javascripts/vue.js"></script>
<style>
.red {background-color: red; width: 100px; height: 100px;}
.red.v-leave { margin-top: 50px; }
.red.v-leave-active { transition: all 3s;}
.red.v-leave-to { margin-top: 100px; opacity: 0;}
.red.v-enter { margin-top: 50px; }
.red.v-enter-active { transition: all 3s;}
.red.v-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
<transition>
<div class="red" v-show="show"></div>
</transition>
<button v-on:click="change">button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
this.show = !this.show;
}
}
});
</script>
</script>
</body>
-
.v-leave当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除； -
.v-leave-active在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果； -
.v-leave-to在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 并不会马上 display: none， 而是首先设置 .v-leave ，下一刻即删除 .v-leave ，同时添加 .v-leave-active .v-leave-to，当 .v-leave-active 中的过渡时间执行完成，则删除 .v-leave-active .v-leave-to，同时添加 display: none。
-
.v-enter当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除； -
.v-enter-active在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果； -
.v-enter-to在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 马上清除 display: none， 然后设置 .v-enter ，下一刻即删除 .v-enter ，同时添加 .v-enter-active .v-enter-to，当 .v-enter-active 中的过渡时间执行完成，则删除 .v-enter-active .v-enter-to。
2. 自定义动画类名：
<script src="/public/javascripts/vue.js"></script>
<style>
.red {background-color: red; width: 100px; height: 100px;}
.red.slide-leave { margin-top: 50px; }
.red.slide-leave-active { transition: all 3s;}
.red.slide-leave-to { margin-top: 100px; opacity: 0;}
.red.slide-enter { margin-top: 50px; }
.red.slide-enter-active { transition: all 3s;}
.red.slide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
<transition name="slide">
<div class="red" v-show="show"></div>
</transition>
<button v-on:click="change">button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
this.show = !this.show;
}
}
});
</script>
该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 name="slide" 使本来的 .v-enter 变成了 .slide-enter。
3. transition 与 animation 同时使用时
<script src="/public/javascripts/vue.js"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
.red {background-color: red; width: 100px; height: 100px;}
.blue {background-color: blue; width: 100px; height: 100px;}
.v-leave { margin-top: 50px; }
.v-leave-active { transition: all 3s; animation: aslide 5s;}
.v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
<transition type="transition" >
<div class="red" v-show="show"></div>
</transition>
<br>
<transition type="animation" >
<div class="blue" v-show="show"></div>
</transition>
<button v-on:click="change">button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
this.show = !this.show;
}
}
});
</script>
vue-transition-2.gif
事例中，动画同时指定了
transition 和 animation 动画， transition 元素的 type 属性可以指定以哪种动画的时间为元素的结束时间，如果不指定动画监控的方式，则会以最长时间的为准。
4. javascript 监听动画
<script src="/public/javascripts/vue.js"></script>
<style>
.red {background-color: red; width: 100px; height: 100px;}
.v-leave { margin-top: 50px; }
.v-leave-active { transition: all 3s;}
.v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<div class="red" v-show="show"></div>
</transition>
<button v-on:click="change">button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
this.show = !this.show;
console.log('-----------click---------');
},
beforeEnter: function (el) {
console.log('beforeEnter:');
},
enter: function (el, done) {
console.log('enter:');
// done()
},
afterEnter: function (el) {
console.log('afterEnter:');
},
enterCancelled: function (el) {
console.log('enterCancelled:');
},
beforeLeave: function (el) {
console.log('beforeLeave:');
},
leave: function (el, done) {
console.log('leave:');
done()
},
afterLeave: function (el) {
console.log('afterLeave:');
},
leaveCancelled: function (el) {
console.log('leaveCancelled:');
}
}
});
</script>
vue-transition-3.gif
- 一旦使用 js 事件，原 css 动画过渡效果就会无效，官方推荐在
<div class="red" v-show="show"></div>上设置v-bind:css="false"可令vue内部机制免去监测css动画事件回调，提高性能。 -
enter和leave事件需手动调用done方法，不然事件一直不会调用后续的after事件，没有调用after事件但是又有其他事件开始了，则被视为动画被cancel了。
5. 页面初始化时的动画：
<script src="/public/javascripts/vue.js"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
.red {background-color: red; width: 100px; height: 100px;}
.apper { margin-top: 50px; }
.apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<div id="app">
<transition
appear
appear-class="apper"
appear-active-class="apper-active"
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook" >
<div class="red" ></div>
</transition>
<button v-on:click="change">button</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
this.show = !this.show;
console.log('-----------click---------');
},
customBeforeAppearHook: function (el) {
console.log('customBeforeAppearHook:');
},
customAppearHook: function (el) {
console.log('customAppearHook:');
// done()
},
customAfterAppearHook: function (el) {
console.log('customAfterAppearHook:');
}
}
});
</script>
vue-transition-4.gif
-
appear属性表示开启初始化动画，appear-class属性指定初始化前的样式，appear-active-class属性指定初始化动画过程的样式； -
transition动画无法在初始化动画中起效，而animation动画则可以； -
before-appearappearafter-appear是事件回调，看事例相当清晰。
6. 动画元素的 key ：
<script src="/public/javascripts/vue.js"></script>
<style>
.v-enter-active { transition: all 1.5s;}
.v-enter-to { margin-top: 100px;}
.v-leave-active { transition: all 1.5s;}
.v-leave-to { margin-top: 10px;}
</style>
<body>
<div id="app">
<div class="show1">
<transition>
<button v-if="show1" @click="show1 = false">on</button>
<button v-else @click="show1 = true">off</button>
</transition>
</div>
<div class="show2">
<transition>
<button v-if="show2" key="on" @click="show2 = false">on</button>
<button v-else key="off" @click="show2 = true">off</button>
</transition>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show1: true,
show2: true
}
});
</script>
vue-transition-5.gif
-
show1为什么没有动画效果呢？因为vue会把切换中的两个button识别成同一个元素，只是修改了button中的不同内容，所以实际上页面并没有发生DOM元素的切换； - 如果要让
vue明确识别出这是2个不同的button元素，则为每个元素指定不同的key属性的值。
7. 元素切换的动画模式：
<script src="/public/javascripts/vue.js"></script>
<style>
.v-enter { margin-left: 100px;}
.v-enter-active { transition: all 5s;}
.v-enter-to { margin-left: 10px;}
.v-leave { margin-left: 10px;}
.v-leave-active { transition: all 5s;}
.v-leave-to { margin-left: 100px;}
</style>
<body>
<div id="app">
<div class="default">
<transition>
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</div>
<div class="inout">
<transition mode="in-out">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</div>
<div class="outin">
<transition mode="out-in">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
});
</script>
vue-transition-6.gif
-
transition默认是同时执行2个元素的切换动画的，案例中红色的off按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被on按钮顶住，无法移动； -
mode="in-out"可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画； -
mode="out-in"可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；
8. 多元素动画：
<script src="/public/javascripts/vue.js"></script>
<style>
.v-enter { margin-left: 100px;}
.v-enter-active { transition: all 2s;}
.v-enter-to { margin-left: 10px;}
</style>
<body>
<div id="app">
<transition-group>
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<transition-group tag="ul">
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="items.push(items.length)">add</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1]
}
});
</script>
vue-transition-7.gif
-
transition里面只能放置单个元素或使用v-ifv-show切换的单个元素，要想使用多个元素的动画，必须使用transition-group； -
transition-group默认会在DOM里渲染成span标签，可使用tag="ul"指定渲染成其他标签； -
transition-group必须为每一个子元素指定key；
8. 多元素的位移动画：
<script src="/public/javascripts/vue.js"></script>
<style>
.v-move { transition: all 1s; }
</style>
<body>
<div id="app">
<transition-group tag="ul" >
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="items.reverse()">reverse</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1,2,3]
}
});
</script>
vue-transition-8.gif
-
transition-group允许在每个元素移动时，添加v-move的样式，移动完成后自动清除该样式； -
transition的属性，transition-group都有，包括nameenterleave；
