vue2.0中transition组件的⽤法
作⽤：实现元素进⼊/离开的过渡效果。
⾸先，让我们举个栗⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="unpkg/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 id="demo">
<button @click="show = !show">点击我</button>
<transition name="toggle">
<p v-if="show">我有⼀只⼩⽑驴，我从来也不骑~~~</p>
</transition>
</div>
<script src='unpkg/vue'></script>
<script>
new Vue({
el: '#demo',
data: {
show: false,
}
})
</script>
</body>
</html>
注意：
1. transition标签内只能有name⼀个属性
2. transition标签内只能有⼀个⼦元素（但此⼦元素内可以包含多个标签）且需要使⽤v-if或v-show来控制显⽰隐藏。
3. transition的name属性规定了类名，例如我定义了name为toggle，则p标签对应的类名为：transition用法搭配
toggle-enter 元素被插⼊时⽣效，在下⼀个帧移除
toggle-enter-active  元素被插⼊时⽣效，执⾏完transition/animation后移除
toggle-leave 元素被隐藏时⽣效，在下⼀个帧移除
toggle-leave-active  元素被隐藏时⽣效，执⾏完transition/animation后移除

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。