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中引入，这样就不会通过打包和处理，只会作为一个入口的页面进行加东西