router路由跳转过渡效果

// 是 vue-router3中的写法
// 在3的版本中使用router4的写法可能导致不生效
      <transition name="slide-left" mode="out-in">
        <router-view></router-view>
      </transition>

  .slide-left-enter {
    opacity: 0;
    transform: translateX(30px);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    transform: translateX(-30px);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }

过渡模式mode：
1.in-out:新元素先进入过渡，完成之后当前元素过渡离开。
2.out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
vue-router4过度动画无效

六个过渡class

v-enter：进入过渡的开始状态，还没进入，准备进入
v-enter-active：进入过渡阶段中
v-enter-to：进入过渡的结束状态

v-leave：离开过渡的开始状态，还没离开，准备离开
v-leave-active：离开过渡阶段中
v-leave-to：离开过渡的结束状态

几个属性

-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。
translate：位移
transform：形变（包括缩放，旋转，位移等等）
transition：过渡
opacity: 1；完全不透明
opacity：0；完全透明

    ::-webkit-scrollbar — 整个滚动条.
    ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
    ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
    ::-webkit-scrollbar-track — 滚动条轨道.
    ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
    ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit; 

路由过渡动画抖动
在缓慢的过渡，在切换到下一个路由（fade-enter）时，上一个路由（fade-leave-to）会占位使得下一个路由的位置下移，所以在快速过渡的情况才发生类似抖动的效果。

CSS font-family字体大合集