Vue 中的 JS 动画与 Velocity.js 的结合
通过 JS 钩子添加动画（入场）
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > Vue 中的 JS 动画与 Velocity.js 的结合</ > < src = "./vue.js"></ ></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> < > var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show }, handleBeforeEnter:function(){ console.log('beforeEnter') } } }) </ > </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> < charset="UTF-8"> < > Vue 中的 JS 动画与 Velocity.js 的结合</ > < src = "./vue.js"></ ></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> < > var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show }, handleBeforeEnter:function(el){ el.style.color = 'red' } } }) </ > </body></html>输出：点击---隐藏---点击---出现（红色）
重新定义事件
methods:{ handleClick:function(){ this.show = !this.show }, handleBeforeEnter:function(el){ el.style.color = 'red' } }添加动画钩子（@enter="handleEnter"）
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > Vue 中的 JS 动画与 Velocity.js 的结合</ > < src = "./vue.js"></ ></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> < > 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) } } }) </ > </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> < charset="UTF-8"> < > Vue 中的 JS 动画与 Velocity.js 的结合</ > < src = "./vue.js"></ ></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> < > 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' } } }) </ > </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> < charset="UTF-8"> < > Vue 中的 JS 动画与 Velocity.js 的结合</ > < src = "./vue.js"></ > < src = "./velocity.js"></ ></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> < > 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("动画结束") } } }) </ > </body></html>输出：点击---隐藏---逐渐出现（1秒）--执行“动画结束”
继续阅读与本文标签相同的文章
-
如何优雅地过滤敏感词
2026-05-26栏目： 教程
-
聊聊Java动态代理（上）
2026-05-26栏目： 教程
-
聊聊设计模式之策略模式
2026-05-26栏目： 教程
-
深入浅出HTTPS
2026-05-26栏目： 教程
-
深入浅出Unix IO模型
2026-05-26栏目： 教程