1. 过渡css-类名
这里v- 是类名的前缀,当有多个过渡使用
<transition name="ss">
区别 , 此时v-enter 替换成: ss-enter等。
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
</head>
<body>
<div id='app'>
<button v-on:click="show = !show">切换</button>
<transition name='fade'>
<p v-if="show">hello</p>
</transition>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</html>
2. 自定义过渡类名
同上的四种状态类似,对于自定义过渡类名:
enter-class ,leave-class
enter-active-class , leave-active-class
这些类的优先级都高于普通类名,一般我们都与animated.css配合使用:
<!DOCTYPE html>
<html>
<head>
<title>与animated配合</title>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='app'>
<button v-on:click="show = !show">切换</button>
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</html>
3. 钩子函数
在钩子函数中直接操作DOM,具体关注组件的状态,在某个阶段给我们做一些处理(el很重要。。)。
<!DOCTYPE html>
<html>
<head>
<title>钩子函数</title>
<style>
</style>
</head>
<body>
<div id='app'>
<button @click="show=!show">toggle</button>
<transition
v-on:before-enter='beforeEnter'
v-on:enter='enter'
v-on:leave='leave'
v-bind:css='false'
>
<p v-if='show'>Demo</p>
</transition>
</div>
</body>
<script src="./vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
show: true
},
methods: {
// 过渡进入 设置过渡进入之前的组件状态
beforeEnter: function(el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
// 设置过渡进入完成时的组件状态
enter: function(el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
// 设置过渡离开完成时的组件状态
leave: function(el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
</script>
</html>