關(guān)于vue的transition中的幾個鉤子函數(shù)為什么沒有產(chǎn)生動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="test">
      <button @click="show = !show">
        Toggle
      </button>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:leave="leave"
      >
        <div v-show="show" ref="oDiv" style="width:200px;height:200px">
          Demo
        </div>
      </transition>
    </div>

    <script>
        new Vue({
          el: '#test',
          data: {
            show: false
          },
          methods: {
            beforeEnter(el) {
                el.style.opacity = 0.6
                el.style.transformOrigin = 'left'
                el.style.transform = 'translate3d(2px, 4px, 0) scale(4)'
            },
            enter(el, done) {
                this.$refs.oDiv.style.background = 'red'
                this.$nextTick(() => {
                    el.style.opacity = 1
                    el.style.transition  = 'all 10.4s'
                    el.style.transform = 'translate3d(0, 0, 0) scale(1)'
                })
                el.addEventListener('transitionend', done)
            },
            afterEnter(el) {
                this.$refs.oDiv.style.transition  = ''
            },
            leave(el, done) {
                // 這句如果加的話就有動畫了
                // this.$refs.oDiv.style.width = '200px'
            }
    </script>
</body>
</html>

比如這樣，我的理解是beforeEnter相當(dāng)于過渡類名中的v-enter，enter相當(dāng)于v-enter-active, 結(jié)果卻沒有動畫效果，請問這是什么原因，謝謝!

下面是寫在app的子組件，不加任何el.clientHeight或者offsetHeight，只是加了this.$nextTick()異步執(zhí)行，然后就有動畫了，更奇怪的是我在leave鉤子里都沒寫異步，就像上文那樣寫還是有過渡leave效果

<div ref="test" style="width:200px;height:200px;background:red"></div>

beforeEnter(el) {
  this.$refs.test.style.transform = 'translate3d(2px, 3px, 0) scale(0.1)'
  this.$refs.test.test.style.opacity = 0
},
enter(el, done) {
  this.$nextTick(() => {
    this.$refs.test.style.transition = 'all 10.4s'
    this.$refs.test.style.transform = 'translate3d(0, 0, 0) scale(1)'
    this.$refs.test.test.style.opacity = 1
  })
  this.$refs.test.addEventListener('transitionend', done)
},
afterEnter() {
  this.$nextTick(() => {
    this.$refs.test.style.transition = ''
  })
},
leave(el, done) {
  this.$refs.test.style.transition = 'all 0.4s'
  this.$refs.test.style[transform] = 'translate3d(2px, 5px, 0) scale(4)'
  this.$refs.test.addEventListener('transitionend', done)
}

回答

編輯回答

久舊酒

我們改寫為原生的js整個執(zhí)行機(jī)制應(yīng)該類似于這樣

// css

#el{
  width:200px;
  height:200px;
  background:red;
  display:none;
}

// html

<div id="test">
  <button onclick="begin()">
    Toggle
  </button>
  <div id="el">
    Demo
  </div>
</div>

// js

var el = document.querySelector('#el')
function begin () {
  el.style.display = 'block'
  // console.log(el.offsetWidth) 注意注釋掉的這一行
  beforeEnter()
  enter()
}
function beforeEnter() {
  el.style.opacity = 0.6
  el.style.transformOrigin = 'left'
  el.style.transform = 'translate3d(2px, 4px, 0) scale(4)'
}
function enter(done) {
  el.style.transition = 'all 1s'
  el.style.opacity = 0.6
  el.style.opacity = 1
  el.style.transform = 'translate3d(10px, 0, 0) scale(1)'
}

你會發(fā)現(xiàn)過渡效果也是沒有生效的。
原因在于瀏覽器不會根據(jù)你js對style的修改實(shí)時(shí)更新，而一般是在當(dāng)前js修改完畢之后，會對所有修改統(tǒng)一更新，而display:none(它本身是不能transition的)的狀態(tài)切換影響了其他過渡效果的切換，畢竟為none的元素沒法觸發(fā)過渡。
將offsetWidth打開，你會發(fā)現(xiàn)過渡生效了，原因在于取offsetWidth導(dǎo)致瀏覽器重繪，使后面的style修改前，display確確實(shí)實(shí)變?yōu)榱薭lock，從而消除了元素狀態(tài)為none對過渡的這種影響。添加setTimeout，“打斷”js的執(zhí)行也可生效。

2018年8月6日 02:03