1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/jquery2.1.4.min.js"></script> 9 <script src="./lib/Vue2.5.17.js"></script> 10 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 11 <style> 12 .ball { 13 width: 15px; 14 height: 15px; 15 border-radius: 50%; 16 background-color: red; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="app"> 22 <input type="button" value="加入" @click="flag=!flag"> 23 <!-- 使用transition元素把小玩包起来 --> 24 <transition 25 @before-enter="beforeEnter" 26 @enter="enter" 27 @after-enter="afterEnter" 28 > 29 <div class="ball" v-show="flag"></div> 30 </transition> 31 </div> 32 <script> 33 var vm = new Vue({ 34 el : '#app', 35 data : { 36 flag : false 37 }, 38 methods: { 39 //注意，动画钩子函数的第一个参数：el表示要执行动画的那个DOM元素，是个原生的JS对象。 40 beforeEnter(el){ 41 //beforeEnter表示动画入场之前，此时动画尚未开始可以在beforeEnter中设置元素开始动画之前的起始样式。 42 //设置小球开始动画之前的起始位置 43 el.style.transform = 'translate(0,0)' 44 }, 45 enter(el,done){ 46 //设置过渡 47 el.offsetWidth 48 //enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态 49 el.style.transform = 'translate(150px,450px)' 50 el.style.transition = 'all 1s ease' 51 //这里的done其实就是afterEnter这个函数，也就是说done是一个函数的引用 52 done() 53 }, 54 afterEnter(el){ 55 console.log('aaa'); 56 this.flag = !this.flag 57 }, 58 }, 59 }) 60 </script> 61 </body> 62 </html>
<!
DOCTYPE
html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
script
src=
"./lib/jquery2.1.4.min.js"></
script>
<
script
src=
"./lib/Vue2.5.17.js"></
script>
<
link
href=
"https://cdn.bootcss.com/animate.css/3.7.0/animate.css"
rel=
"stylesheet">
<
style>
.ball {
width:
15
px;
height:
15
px;
border-radius:
50
%;
background-color:
red;
}
</
style>
</
head>
<
body>
<
div
id=
"app">
<
input
type=
"button"
value=
"加入"
@click=
"flag=!flag">
<!-- 使用transition元素把小玩包起来 -->
<
transition
@before-enter=
"beforeEnter"
@enter=
"enter"
@after-enter=
"afterEnter"
>
<
div
class=
"ball"
v-show=
"flag"></
div>
</
transition>
</
div>
<
script>
var vm
=
new
Vue({
el :
'#app',
data : {
flag :
false
},
methods: {
//注意，动画钩子函数的第一个参数：el表示要执行动画的那个DOM元素，是个原生的JS对象。
beforeEnter(
el){
//beforeEnter表示动画入场之前，此时动画尚未开始可以在beforeEnter中设置元素开始动画之前的起始样式。
//设置小球开始动画之前的起始位置
el.style.transform
=
'translate(0,0)'
},
enter(
el,
done){
//设置过渡
el.offsetWidth
//enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform
=
'translate(150px,450px)'
el.style.transition
=
'all 1s ease'
//这里的done其实就是afterEnter这个函数，也就是说done是一个函数的引用
done()
},
afterEnter(
el){
console.
log(
'aaa');
this.flag
=
!
this.flag
},
},
})
</
script>
</
body>
</
html>
<!
DOCTYPE
html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
script
src=
"./lib/jquery2.1.4.min.js"></
script>
<
script
src=
"./lib/Vue2.5.17.js"></
script>
<
link
href=
"https://cdn.bootcss.com/animate.css/3.7.0/animate.css"
rel=
"stylesheet">
<
style>
.ball {
width:
15
px;
height:
15
px;
border-radius:
50
%;
background-color:
red;
}
</
style>
</
head>
<
body>
<
div
id=
"app">
<
input
type=
"button"
value=
"加入"
@click=
"flag=!flag">
<!-- 使用transition元素把小玩包起来 -->
<
transition
@before-enter=
"beforeEnter"
@enter=
"enter"
@after-enter=
"afterEnter"
>
<
div
class=
"ball"
v-show=
"flag"></
div>
</
transition>
</
div>
<
script>
var vm
=
new
Vue({
el :
'#app',
data : {
flag :
false
},
methods: {
//注意，动画钩子函数的第一个参数：el表示要执行动画的那个DOM元素，是个原生的JS对象。
beforeEnter(
el){
//beforeEnter表示动画入场之前，此时动画尚未开始可以在beforeEnter中设置元素开始动画之前的起始样式。
//设置小球开始动画之前的起始位置
el.style.transform
=
'translate(0,0)'
},
enter(
el,
done){
//设置过渡
el.offsetWidth
//enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform
=
'translate(150px,450px)'
el.style.transition
=
'all 1s ease'
//这里的done其实就是afterEnter这个函数，也就是说done是一个函数的引用
done()
},
afterEnter(
el){
console.
log(
'aaa');
this.flag
=
!
this.flag
},
},
})
</
script>
</
body>
</
html>