javascript - 使用vue2.0 transition怎么完成鼠标移上去,从屏幕外侧滑出二维码,离开二维码滑出屏幕的效果,
PHP中文网
PHP中文网 2017-05-19 10:30:36
0
2
833

使用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>
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
伊谢尔伦

改成下面试试

.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;
}
迷茫

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不是最终状态
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板