<!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动画库 -->
![[leetcode] 35. 搜索插入位置(Java)(二分)](http://pic.xiahunao.cn/[leetcode] 35. 搜索插入位置(Java)(二分))
)
