transition

一、transition

transition ：过渡属性的简写 用于设置4个过渡属性

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

transition是双标签，包裹要过度的元素/组件，transition只会把过度的效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在可被检查的组件层级中。

二、transition元素的属性

• name -string，用于自动生成CSS过度类名。例如：name=“fade” 将自动扩展为 .fade-enter
  ，.fade-enter-active，等。默认类名为 “v”。
• appear -boolean，是否在初始渲染时使用过度。默认false
• css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的JavaScript 钩子
• type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
• mode -string，控制离开/进入过渡的时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时进行。
• duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue
  会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

三、类名

<template>
  <div id="app">
    <!--	  exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存-->
    <!--	  exclude="Detail"-->
    <transition :name="trasitionName">
        <router-view class="Router" />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      trasitionName: "left-slide"
    };
  },
  watch: {
    $route(to, from) {
      //   console.log(to);
      if (to.name == "Detail") {
        this.trasitionName = "slide-left";
      } else if (to.name == "home") {
        this.trasitionName = "slide-right";
      }
    }
  }
};
</script>

<style>
.Router {
  /* transition: all .8s ease; */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.slide-left-leave {
// 可以理解为将要离开的页面初始位置
  opacity: 1;
}
.slide-left-leave-to {
// 离开页面的最后位置
  transform: translateX(-100%);
}
.slide-left-enter {
// 进入页面的开始位置
  transform: translateX(100%);
}
.slide-left-enter-to {
// 进入页面的最终位置
}
.slide-left-leave-active,
.slide-left-enter-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.8s ease;
}
// 自动生成的class类，添加一个过度属性
</style>