transition

一、CSS3 transition 属性

定义和用法:

transition 属性是一个简写属性，用于设置四个过渡属性：

1、transition-property  规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

语法：

transition-property: none|all|property;

 

2、transition-duration  规定完成过渡效果需要花费的时间（以秒或毫秒计）

语法：

transition-duration: time;（默认值是 0，意味着不会有效果。）

3、transition-timing-function 规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

 

4、transition-delay 属性规定过渡效果何时开始；值以秒或毫秒计。

语法：

transition-delay: time;

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法: 

transition: property duration timing-function delay;

 

二、在vue中如何使用transition

Vue 提供了 transition 的封装组件，用来包裹需要在切换添加过渡动画的组件或元素。

transition动画的实现是依靠css进行控制的，如果页面有多个transition的话可以通过修改name属性，分别给不同的transition添加变幻样式。

transition的属性：

v-enter：显示/插入前的效果

v-active-enter：显示/插入的过渡时间和函数

v-enter-to：显示/插入后的效果

v-leave：隐藏/移除前的效果

v-active-leave：隐藏/移除的过渡时间和函数

v-leave-to：隐藏/移除后的效

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 事件。

注：在使用属性时，将v换成transiton标签中的name值

<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>