vue2.0中transition组件的用法
作用：实现元素进入/离开的过渡效果。
首先，让我们举个栗子：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<style>
.toggle-enter-active {
transition: all 3s ease;
height: 50px;
overflow: hidden;
}
.toggle-leave-active {
transition: all 3s ease;
height: 0px;
overflow: hidden;
}
.toggle-enter,
.toggle-leave {
height: 0;
opacity: 0;
}
</style>
</head>
<body>
<div >
<button @click="show = !show">点击我</button>
<transition name="toggle">
<p v-if="show">我有一只小毛驴，我从来也不骑~~~</p>
</transition>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
new Vue({
el: '#demo',
data: {
show: false,
}
})
</script>
</body>
</html>注意：
- transition标签内只能有name一个属性
- transition标签内只能有一个子元素（但此子元素内可以包含多个标签）且需要使用v-if或v-show来控制显示隐藏。
- transition的name属性规定了类名，例如我定义了name为toggle，则p标签对应的类名为：
toggle-enter 元素被插入时生效，在下一个帧移除
toggle-enter-active 元素被插入时生效，执行完transition/animation后移除
toggle-leave 元素被隐藏时生效，在下一个帧移除
toggle-leave-active 元素被隐藏时生效，执行完transition/animation后移除
