Vue中的动画可以使用过渡类名（默认/自定义）、第三方类库（如animated.css）来实现，注意如果使用过渡类名或第三方类库没法实现"半场动画"，也就是说只能实现有去有回的动画，不能实现有去无回的动画，如果要实现有去无回的动画需要使用钩子函数。
<style>
<!-- 过渡类名：是以v开头的，vue默认的方式定义动画 -->
.v-enter-active, .v-leave-active {
transition: all .8s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(150px);
}
</style>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">
Toggle
</button>
<!-- 使用过渡类名时：transition上不需要加任何东西 -->
<transition>
<p class="ss" v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: false
},
methods: {}
})
</script>
<style>
<!--
除了使用过渡类名外，vue还支持使用自定义类名的方式
使用自定义类名时需要在transition上加name属性，类
名以该属性指定的值为开头。
-->
.fade-enter-active, .fade-leave-active {
transition: all .8s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
transform: translateX(150px);
}
</style>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: false
},
methods: {}
})
</script>
<!-- vue还支持使用第三方库的方式实现动画。 --> <link rel="stylesheet" href="../lib/animate.css"> <script src="../lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <button @click="show = !show"> Toggle </button> <!-- 注意除了要加上第三方类库的名称外还要加上animated类名 --> <!--<transition--> <!--enter-active-class="animated bounceIn"--> <!--leave-active-class="animated bounceOut">--> <!--<p v-if="show">hello</p>--> <!--</transition>--> <!-- animated在两个上都加太麻烦？ --> <!--<transition--> <!--enter-active-class="bounceIn"--> <!--leave-active-class="bounceOut">--> <!--<p class="animated" v-if="show">hello</p>--> <!--</transition>--> <!-- 怎么设置动画的时间？:duration="3000"设置动画过渡的时间 --> <!--<transition--> <!--enter-active-class="bounceIn"--> <!--leave-active-class="bounceOut" :duration="3000"> --> <!--<p class="animated" v-if="show">hello</p>--> <!--</transition>--> <!-- 怎么分别设置进入和离开的时间 --> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:800}"> <p class="animated" v-if="show">hello</p> </transition> </div> <script> new Vue({ el: '#app', data: { show: false }, methods: {} }) </script>
不管是过渡类名的动画还是第三方类库的动画都只能是"全场动画"（即有去有回），不能实现有去无回（"半场动画"）。要实现半场动画需要使用vue提供的钩子函数来实现。
钩子函数提供了"上半场"动画和"下半场"动画的处理方式，如果你要让动画有去无回，只需要实现上半场动画即可，如果有去有回实现上半场+下半场即可。
<style type="text/css"> .boll { 10px; height: 10px; border-radius: 50%; background-color: #D55656; } </style> <script src="../lib/vue-2.4.0.js"> </script> </meta> </head> <body> <!-- 使用过渡类或者第三方类库时只能实现全场动画，即有来有回，不能 实现有来无回的动画，要实现半场动画需要借助vue提供的javascript钩子 函数。 --> <div id="app"> <button @click="show = !show"> Toggle </button> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <p class="boll" v-if="show"></p> </transition> </div> <script> new Vue({ el: '#app', data: { show: false }, methods: { // entering... // note: the first param:el of the animate method is expressed: the DOM element who where be execute animate is a native JS DOM object. // you can think it as: el is by ‘document.getElementById('') ’ get the native JS DOM object. beforeEnter(el){ // expressed: before the animation starts,you can setting some style in here. el.style.transform = "translate(0,0)"; }, enter(el, done) { // expressed: animating...,you can setting the element stop status. el.offsetWidth el.style.transform = "translate(100px,400px)"; el.style.transition = "all 1s ease"; // done函数就相当于afterEnter done(); }, afterEnter(el) { // expressed: animation stop. this.show = !this.show; } } }) </script>
transition-group
<link href="../../static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="../lib/vue-2.4.0.js">
</script>
<style type="text/css">
/* 先定义好动画类名 */
.v-enter,.v-leave-to {
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,.v-leave-active {
transition: all 0.6s ease;
}
</style>
</meta>
</head>
<body>
<div id="app">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">
id
</label>
<input class="form-control" type="text" v-model="id">
</input>
</div>
<div class="form-group">
<label for="exampleInputName2">
Name
</label>
<input class="form-control" type="text" v-model="name">
</input>
</div>
<button @click.prevent="add" class="btn btn-default" type="submit">
add
</button>
</form>
<ul>
<!-- 在实现列表元素过渡的时候，如果需要过渡的动画，是通过v-for循环渲染出来的，不能使用transition 包裹，需要使用 transition-group -->
<!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置:key属性 -->
<transition-group>
<li :key="item.id" v-for="item in items">
{{item.name}}
</li>
</transition-group>
</ul>
<!-- 注意：一定要是列表元素才行！ -->
<!-- <table>
<transition-group>
<tr :key="item.id" v-for="item in items">
<td>
{{item.name}}
</td>
</tr>
</transition-group>
</table> -->
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id:"",
name:"",
items:[
{id:1,name:"毛毛"},
{id:2,name:"吉吉"}
]
},
methods: {
add(){
this.items.push({id:this.id,name:this.name});
}
}
});
</script>
