vue示例之transition-另外发现一个vue(可能的)小bug
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet"> <style> /* .hide-leave-active,.hide-enter-active{ transition: opacity .5s } .hide-leave-to,.hide-enter{ opacity: 0 }*/ p { width: 100px; height: 100px; background-color: rebeccapurple; position: absolute; left: 100px; top: 100px; } </style> </head> <body> <div id="div1"> <button @click="change">点我</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false"> <p v-show="show">hello</p> </transition> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#div1', data: { show: true }, methods: { change: function () { this.show = !(this.show) }, beforeEnter: function (el) { Velocity(el, { width: '500px', color: 'red', opacity: 0, }, { duration: 1100, easing: "swing" }) }, enter: function (el, done) { Velocity(el, { opacity: 1, top: '100px', color: 'blue' }, { duration: 1100, easing: "swing", }); Velocity(el, { top: '150px', color: 'blue' }, { duration: 1100, easing: "swing", complete: done }) }, leave: function (el, done) { Velocity(el, { top: '200px', color: 'blue', opacity: 0, }, { duration: 1100, easing: "swing", }); Velocity(el, { top: '300px', color: 'blue' }, { duration: 1100, easing: "swing", complete: done }) } /* beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } */ } }) </script> </html>
另外发现一个vue(可能的)小bug,
就是在切换时候 用 v-show 好使。换成v-if则不行,元素的display一直是none.
但是换成官方的例子是可以的 https://vuefe.cn/v2/guide/transitions.html,
此处暂时记一下,