transition

一、transition

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">
    <transition name="slide-left">
        <router-view class="Router" />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
    };
  }
};
</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 {
  transition: all 0.8s ease;
}
// 自动生成的class类，添加一个过度属性
</style>