Vue 中的 JS 动画与 Velocity.js 的结合
通过 JS 钩子添加动画（入场）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='root'>
<transition name="fade" @before-enter="handleBeforeEnter">
<div v-show ="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(){
console.log('beforeEnter')
}
}
})
</script>
</body>
</html>输出：点击---隐藏---点击---出现
绑定事件
<transition name="fade" @before-enter="handleBeforeEnter">
定义事件
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(){
console.log('beforeEnter')
}
}添加动画钩子（@before-enter="handleBeforeEnter"）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='root'>
<transition name="fade" @before-enter="handleBeforeEnter">
<div v-show ="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
}
}
})
</script>
</body>
</html>输出：点击---隐藏---点击---出现（红色）
重新定义事件
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
}
}添加动画钩子（@enter="handleEnter"）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='root'>
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
>
<div v-show ="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
}
}
})
</script>
</body>
</html>输出：点击---隐藏---点击---出现（红色）--2秒后绿色（通过JS实现动画效果）
重新定义事件（done():手动告诉 vue ，回调函数已经执行完毕）
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
}
}添加动画钩子（@enter="handleEnter"）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='root'>
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show ="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color = 'green'
},2000)
setTimeout(()=> {
done()
},4000)
},
handleAfterEnter:function(el){
el.style.color = 'yellow'
}
}
})
</script>
</body>
</html>输出：点击---隐藏---点击---出现（红色）--2秒后绿色--再2秒黄色（通过JS实现动画效果）
重新定义事件（给done()添加定时器）
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.color = 'red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color = 'green'
},2000)
setTimeout(()=> {
done()
},4000)
},
handleAfterEnter:function(el){
el.style.color = 'yellow'
}
}总结：入场动画钩子：@before-enter="handleBeforeEnter" / @enter="handleEnter" / @after-enter="handleAfterEnter"
出场动画钩子：@before-leave="handleBeforeLeave" / @enter="handleLeave" / @after-leave="handleAfterLeave"
与 Velocity.js 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中的 JS 动画与 Velocity.js 的结合</title>
<script src = './vue.js'></script>
<script src = './velocity.js'></script>
</head>
<body>
<div id ='root'>
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show ="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
handleEnter:function(el,done){
Velocity(el,{opacity:1},
{duration:1000,
complete:done
})
},
handleAfterEnter:function(el){
console.log("动画结束")
}
}
})
</script>
</body>
</html>输出：点击---隐藏---逐渐出现（1秒）--执行“动画结束”
