示例程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="Vue-v2.5.22.js"></script>
<title>Title</title>
</head>
<body>
第一次調用 appear，隨後調用 enter
<div id="app">
<transition
name="fade" mode="in-out" appear
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@appear="appear"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div class="content" v-if="ok">{{ok}}</div>
</transition>
</div>
<!--vm.ok=false-->
<!--vm.ok=true-->
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
ok: true,
},
methods: {
beforeEnter: function (el) {
console.log('beforeEnter', el.className);
},
enter: function (el) {
console.log('enter', el.className);
},
afterEnter: function (el) {
console.log('afterEnter', el.className);
},
appear: function (el) {
console.log('appear', el.className);
},
beforeLeave: function (el) {
console.log('beforeLeave', el.className);
},
leave: function (el) {
console.log('leave', el.className);
},
afterLeave: function (el) {
console.log('afterLeave', el.className);
}
}
})
</script>
</body>
</html>
