首页 > 代码库 > vue示例之transition-另外发现一个vue(可能的)小bug
vue示例之transition-另外发现一个vue(可能的)小bug
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href=http://www.mamicode.com/"//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=http://www.mamicode.com/"https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><script src=http://www.mamicode.com/"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，
此处暂时记一下，
vue示例之transition-另外发现一个vue(可能的)小bug
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。