博客

今天看了vue中js钩子函数实现动画，照着敲了一遍发现只有enter的淡入能实现，淡出没有动画效果，即使在leave()中移入done用settimeout延迟也仅仅是延迟的触发时间，并没有出现动画效果。后来经过搜索发现是enter()中缺少了一行代码 el.offsetWidth ，关于这行代码的作用参考文档里的大佬有解释，本人还不是很明白就不乱解释了，原文章链接:

vue动画过渡 javascript钩子函数详解_V v vae的博客-CSDN博客_过渡动画钩子函数

最终实现的代码如下：

<template>
  <div>
      <!-- :css="false" 可以指定不加载css样式 -->
      <transition  @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" :css="false">
          <p v-if="isshow">显示或隐藏</p>
      </transition>
      <button @click="isshow=!isshow">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isshow: true
    }
  },
  methods: {
    beforeLeave: function (el) {
      console.log('离开前')
      el.style.opacity = 1
    },
    leave: function (el, done) {
      console.log('离开进行中')
      el.style.transition = 'all 3s'
      el.style.opacity = 0
      setTimeout(done, 3000)
    },
    afterLeave: function (el) {
      console.log('离开结束')
    },
    beforeEnter: function (el) {
      console.log('进入前')
      el.style.opacity = 0
    },
    enter: function (el, done) {
      // el.offsetWidth引起浏览器的重回
      // eslint-disable-next-line no-unused-expressions
      el.offsetWidth
      el.style.transition = 'all 3s'
      console.log('进入过程中')
      el.style.opacity = 1
      setTimeout(done, 3000)
    },
    afterEnter: function (el) {
      console.log('进入结束')
    }
  }
}
</script>

<style scoped>
p{
    width: 200px;
    height: 200px;
    background: greenyellow;
}
</style>