Vue过渡动画之tabbar切换div动画实战采坑_javascript_weixin

先上代码一脸懵逼,先上效果图,有个概念

注:本人也是个垃圾菜鸟,我也是看视频学习vue,这些项目也是视频里面的,写在这边让我印象深刻,仅此而已...,做不对,请指教!

业务需求:

我想点击其他三个底部tabbar按钮,然后切换的时候要有过渡动画,过渡的方向是从右边往左边,也就是点击会员,会员的相关页面从右边出来,然后当前页首页要从左边出去,中间要有过渡

思考与实现:

1. 页面结构是顶部header.vue , 底部是tabbar,中间是个大容器,里面放的是router-view,所以我们要在router-view外面包一层过渡动画标签,然后要去写相应的css代码了,部分代码如下

<!-- 中间内容 -->
      <div class="middleContainter">
        <transition>
          <router-view></router-view>
        </transition>
      </div>
复制代码

2. 然后我们要写相应的css了,官方的文档写了,v-enter,v-leave-to分别是进入时候和出去时候的关键帧,然后v-enter-active和v-leave-active,这两个是过渡时间,也就是动画执行的期间,然后css设置如下:

.v-enter,.v-leave-to{
  opacity: 0;
  transform: translateX(100%);
}
复制代码

上述代码意思为,进入和出去的时候,要隐藏,然后位移的距离是页面的100%宽度,此时中国页面去了右边

设置过渡

.v-enter-active,.v-leave-active{
  transition: all .6s ease
}
复制代码

运行问题很多,一一解决吧!看效果图!

解决第一个问题,底部有滚动条

出现的原因就是,当我点击会员的时候,此时会渲染出来会员的div,他们都在容器里面,所以宽度变大了,所以有滚动条,然后头部header跑到两个页面宽度加起来的中间,应该好理解,那么我可以在中间容器加个 overflow-x:hidden 属性,一个bug解决!,其实头部问题也解决了!

然后就是切换div有问题,当我点击会员,会员的div从右边进来,然后他却从右边出去了,一来和我从左边出去的div需求不符,二来,太难看,所以我要右边进来,左边出去

所以进来的时候关键帧和出去的关键帧要分开写!!!代码如下:

.v-enter,{
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to{
  opacity:0 ;
  transform: translateX(-100%);
}
复制代码

我们出去的时候要从左边出去,所以transform: translateX(-100%),然后最后一个问题,就是切换的时候,也就是我上面图片画的红框部分会员的div在首页的div下面,这样很正常,网页是流式布局,所以我们要把离开的div要让他不再文档标准流里面,所以我们要在离开的时候这个关键帧,加一个position:absolate,代码如下

.v-enter,{
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to{
  opacity:0 ;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,.v-leave-active{
  transition: all .6s ease
}

复制代码