Vue中的Js动画与Velocity.js 的结合
生活随笔
收集整理的這篇文章主要介紹了
Vue中的Js动画与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.min.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><!--
入場動畫鉤子函數:@before-enter @enter @after-enter
出場動畫鉤子函數:@before-leave @leave @after-leave
velocity.min.js是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.min.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><!--
入場動畫鉤子函數:@before-enter @enter @after-enter
出場動畫鉤子函數:@before-leave @leave @after-leave
velocity.min.js是js動畫庫
-->
?
轉載于:https://www.cnblogs.com/xuyxbiubiu/p/10020504.html
總結
以上是生活随笔為你收集整理的Vue中的Js动画与Velocity.js 的结合的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle GoldenGate OG
- 下一篇： html5倒计时秒杀怎么做,vue 设