一.使用<transition name="fade"></transition>标签
name="fade", 是创建个fade的类名写在css中
- CSS: 在进入/离开的过渡中,会有 6 个 class 切换。
- v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
- v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
- v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除),在 transition/animation 完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
- v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
- v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除),在 transition/animation 完成之后移除。
vue动画显示class机制
<p v-if="show" class="detial" >hello</p>
- 1.先添加fade-enter类 // 初始状态
- <p v-if="show" class="detial fade-enter" >hello</p>
- 2.再添加fade-enter-active // 变化状态
- <p v-if="show" class="detial fade-enter fade-enter-active" >hello</p>
- 3.再添加fade-enter-to, 删除fade-enter // 变化后的状态
- <p v-if="show" class="detial fade-enter-active fade-enter-to" >hello</p>
- 4.再逐步删除fade-enter-to fade-enter-active
- <p v-if="show" class="detial" >hello</p>
二.动画例子
html
<transition name="fade">
<p v-if="show" class="detial" >hello</p>
</transition>
css
.detial{width:300px;height:300px;background:red;}
// 过渡条件
.fade-enter-active, .fade-leave-active {
transition: all .3s ease;
}
// 开始结束状态
.fade-enter, .fade-leave-to{ /* .fade-leave-active below version 2.1.8 */
width:100px;height:100px;
opacity: 0;
}
// fade-leave-to可以换fade-leave-active, 在2.18以下版本
三.动画可以在属性中声明 JavaScript 钩子
<transition
//1.动画进入之前
v-on:before-enter="beforeEnter"
//2.动画进入
v-on:enter="enter"
//3.动画进入之后
v-on:after-enter="afterEnter"
//动画进入时取消
v-on:enter-cancelled="enterCancelled"
//4.动画消失之前
v-on:before-leave="beforeLeave"
//5.动画消失
v-on:leave="leave"
//6.动画消失之后
v-on:after-leave="afterLeave"
//动画消失时取消
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
四.JavaScript 钩子的进程
<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade"
@before-enter="beforeEeter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div class="detial" v-show="show"></div>
</transition>
</div>
</template>
css
<style>
.detial{width:300px;height:300px;background:red;}
.fade-enter-active, .fade-leave-active {
transition: all 5s ease;
}
.fade-enter, .fade-leave-active{
width:100px;height:100px;
opacity: 0;
}
</style>
vue.js
<script>
export default {
name: 'app',
data () {
return {
show: false,
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
beforeEeter(){
console.log("1.动画进入之前")
},
enter(){
console.log("2.动画进入...")
},
afterEnter(){
console.log("3.动画进入之后")
},
enterCancelled(){
console.log("动画进入时取消")
},
beforeLeave(){
console.log("4.动画消失之前")
},
leave(){
console.log("5.动画消失...")
},
afterLeave(){
console.log("6.动画消失之后")
},
leaveCancelled(){
console.log("动画消失时取消")
}
}
}
</script>
五.结合animate.css来使用
引入animate.css, 可以通过 bower 下载
$ bower install animate.css
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
npm下载
npm install animate.css --save
HTML, transition中必须添加animated类名
<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"
>
<div class="detial" v-show="show"></div>
</transition>
</div>
</template>
控制时间快慢
<style lang="stylus" scoped>
.animated {animation-duration: 0.5s;}
</style>
六.多个元素一起运动
<transition-group></transition-group>
1.默认为一个 <span>包裹多个元素, 通过 tag 来改变: tag="div"
2.总是需要 提供唯一的 key 属性值" :key="1", v-bind:key="2"
<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group tag="div"
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"
>
<div class="detial" v-show="show" :key="1"></div>
<div class="detial" v-show="show" :key="2"></div>
</transition-group>
</div>
</template>
多个元素一起运动例子
<div id="box">
<input type="text" v-model="show">
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>
js
new Vue({
el:'#box',
data:{
show:'',
list:['apple','banana','orange','pear']
},
computed:{
lists:function(){
var arr=[];
this.list.forEach(function(val){
if(val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
});