javascript - How to use vue2.0 transition to achieve the effect of moving the mouse up, sliding the QR code out from the outside of the screen, and leaving the QR code and sliding out of the screen.

Question

How to use vue2.0 transition to complete the effect of moving the mouse up, sliding out the QR code from the outside of the screen, leaving the QR code and sliding out of the screen. The following is the code I wrote,
But what I wrote failed Yes: When the mouse is moved up, the box slides over, but the box disappears without leaving the mouse. Solution

.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

Change it to the following and try it

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

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

Or like this

.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 cannot be written like this. .fade-enter-active, .fade-leave-active classes will be removed after the animation is completed. After removal, it will be your original css style. Therefore, after the animation is executed, 2 The QR code disappeared again

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

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