JS实现过渡

代码

<div>
      <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false">
           <p class="animate-p" v-show="show">i am show</p>
      </transition>
</div>
const $ = window.$
export default {
 methods: {
    beforeEnter (el) {
      $(el).css({
        left: 0,
        opacity: 0
      })
    },
    enter (el, done) {
      $(el).animate({
        left: '500px',
        opacity: 1
      }, {
        duration: 1500,
        complete: done
      })
    },
    leave (el, done) {
      $(el).animate({
        left: '1000px',
        opacity: 0
      }, {
        duration: 1500,
        complete: done
      })
    }
  }
}

注意:

  • 需要绑定css为false,可以避免过渡过程中css的影响
<transition 
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false">
  <p></p>
 </transition>
  • 方法中是有参数的,el就表示在过渡标签内的dom元素;enter和leave方法里还有个额外参数done,这个是在调完方法之后再调用done方法
  • 建议在引入jQuery库时,在index.html中引入,这样就不会通过打包和处理,只会作为一个入口的页面进行加东西
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容