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几个状态含义不一样是么？具体是什么？