过渡动画，使用css样式有效果但是换成js钩子不起作用？

Question

Vue.component("fade",{
      props:["show"],
      template:`
        <transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" @enter-cancelled="handleEnterCancel">
          <slot v-show="show"></slot>
        </transition>
      `,
      methods:{
        handleBeforeEnter:function(el){
          el.style.opacity=0;
        },
        handleEnter:function(el,done){
          el.style.transition="opacity 5s";
          done();
        },
        handleAfterEnter:function(el){
          el.style.opacity=1;
        },
        handleEnterCancel:function(){
          el.styl.opacity = 0; 
        }
      }
    })

我只是把css的内容放到js中，发现没有效果，只有按照视频中讲的使用velocityjs才起作用，为什么？js钩子的状态含义同class几个状态含义不一样是么？具体是什么？

Answer 1

Dell 2019-01-07 23:34:12

在反复听听这块的内容，你的写法体现出其实你还没有理解这个钩子的作用。

• 提问者 慕虎3332157 #1

  我重新听了，敲了遍代码，之前是我理解错了。
  但是需要在enter中加入 el.offsetHeight 触发重绘才能实现过渡效果，这是为什么？

• Dell 回复 提问者 慕虎3332157 #2

  我看下代码，我记得我没有写过这个代码啊

• 提问者 慕虎3332157 回复 Dell #3

  对，视频中没有讲，我只是把视频中的css过渡效果改写成js钩子，但是发现需要加上el.offsetHeight 才有效果，不明白为什么？

点开查看后面1条评论