javascript - 使用vue2.0 transition怎麼完成滑鼠移上去，從螢幕外側滑出二維碼，離開二維碼滑出螢幕的效果，

Question

使用vue2.0 transition怎麼完成滑鼠移上去，從螢幕外側滑出二維碼，離開二維碼滑出螢幕的效果，以下是我寫的程式碼，
但是我寫的下過卻是：滑鼠移上去，盒子是滑動過來的，滑鼠沒離開，盒子卻已經消失了，求解

.erweima {

    position: fixed;
    left: -100px;
    bottom: 200px;
}
.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
    left: -100px;
}

.fade-enter, .fade-leave-active {
    left: 100px
}

<a class='wechat' href="" @mouseenter="show=!show" @mouseleave="show=!show"></a>

  <transition name='fade'>
             <p v-show="show" class="erweima" style="width: 100px; height: 100px;"><img src="../../static/img/image/wechat_hov.png" alt=""></p>
    </transition>

Answer 1

改成下面試試

.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
}

.fade-enter, .fade-leave-active {
    transform：translateX(100px)
}

或這樣

.erweima{
  position: fixed;
  width: 100px; 
  height: 100px;
  left: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: all 1s ease;

}
.fade-enter, .fade-leave-active {
  left: -100px;
}

Answer 2

css不能這樣寫，.fade-enter-active, .fade-leave-active這些class都會在動畫完成後移除的，移除後又是你的原來的css樣式了，所以，動畫執行完，二維碼又消失了

.erweima {//这里需要写最终的显示状态，用v-if或v-show控制

    position: fixed;
    left: -100px;
    bottom: 200px;
}
.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
    left: -100px;//去掉这句，这个class不是最终状态
}