Vue定義動畫的鉤子函式
阿新 • • 發佈：2019-02-09
1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../animate.css" rel="stylesheet">
<script type="text/javascript" src="../vue1026.js"></script>
<style>
.show{
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="xsClick">請點選</button>
<br>
<div transition="show" class="show" v-if="xs">這是一個美麗的清晨。</div>
</div>
</body>
<script>
Vue.transition('show',{
//定義動畫的初始位置
beforeEnter:function (el) {
el.style.transform="translate(100px,0)";
},
//定義動畫的結束位置
enter:function (el, done) {
el.offsetWidth;
el.style.transform="translate(0,0)";
done();
},
afterEnter:function (el) {
vm.xs=!vm.xs;
}
})
var vm= new Vue({
el:'#app',
data:{
xs:false,
},
methods:{
xsClick:function () {
this.xs=!this.xs;
},
},
});
</script>
</html>2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../animate.css" rel="stylesheet" type="text/css">
</head>
<style>
.show{
transition:0.4s all ease;
}
</style>
<body>
<div id="app">
<button @click="xsClick">請點選</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-if="xs" class="show">這是一個美麗的清晨。</div>
</transition>
</div>
<script type="text/javascript" src="../vue221.js"></script>
<script>
new Vue({
el:'#app',
data:{
xs:true
},
methods:{
xsClick:function () {
this.xs=!this.xs
},
//定義動畫的初始位置
beforeEnter:function (el) {
el.style.transform="translate(100px,0)";
},
//定義動畫的結束位置
enter:function (el, done) {
el.offsetWidth;
el.style.transform="translate(0,0)";
done();
},
afterEnter:function (el) {
this.xs=!this.xs
}
}
})
</script>
</body>
</html>