javascript - 使用vue2.0 transition怎么完成鼠标移上去，从屏幕外侧滑出二维码，离开二维码滑出屏幕的效果，

Question

使用vue2.0 transition怎么完成鼠标移上去，从屏幕外侧滑出二维码，离开二维码滑出屏幕的效果，以下是我写的代码，
但是我写的下过却是：鼠标移上去，盒子是滑动过来的，鼠标没离开，盒子却已经消失了，求解

伊谢尔伦 · Answer

改成下面试试

.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

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不是最终状态
}