概述

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

主要用于 v-show, v-if 或 router-view 的过渡动画，分为进场和出场。

官方示例

<template>
  <div id="example">
    <button @click="show = !show">
      Toggle render
    </button>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="scss">
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

示例图

自定义name

给transition组件设置不同的name

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则 v- 是这些类名的默认前缀。

如果你使用了，那么 v-enter 会替换为 my-transition-enter。

在Vue页面通过watch监听路由的变化，给transition组件设置不同的name，从而实现不同的过渡动画。

<template>
  <div id="home">
    <transition :name="transitionName">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Demo",
  components: {
  },
  data() {
    return {
      transitionName: "",
    };
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } 
      if(to.meta.index < from.meta.index){
        this.transitionName = "slide-right";
      }
      if (to.meta.index = from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-com";
      } else {
        this.transitionName = "slide-back";
      }
    },
  },
};
</script>
<style  scoped>

</style>

css属性transition

过渡用的专场动画，通常就是，淡入淡出，放大缩小，或者左右侧进出。

通过css的transition属性来实现。

1.transition简介

css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

根据开始状态和结束状态的具体数值，计算出中间状态。

2.transition属性语法

属性	介绍
transition-property	规定设置过渡效果的 CSS 属性的名称。例如, opacity,color。默认值是all。
transition-duration	规定完成过渡效果需要多少秒或毫秒。例如，1s。默认值是0s。
transition-timing-function	规定速度效果的速度曲线。例如, linear、 ease-in、steps动画分段函数或自定义的 cubic-bezier 函数)。默认值是ease，中间快，两头慢。
transition-delay	定义过渡效果何时开始。例如，1s。默认值是0s。

transition-property

规定设置过渡效果的 CSS 属性的名称。

例如, opacity,color。默认值是all。

transition-duration

规定完成过渡效果需要多少秒或毫秒。

例如，1s。默认值是0s。

transition-timing-function

规定速度效果的速度曲线。

例如, linear、 ease-in、steps动画分段函数或自定义的 cubic-bezier 函数)。

默认值是ease，中间快，两头慢。

transition-delay

属性指定何时将开始切换效果。

transition-delay值是指以秒为单位（S）或毫秒（ms）

示例代码

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px auto;
  border-radius: 100%;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function：ease;
 transition-timing-function：ease;
 
div:hover {
  border-radius: 0px;
}

3.transition属性语法简写

transition-property

transition-duration

transition-timing-function

transition-delay

以上，这四个属性，可以简写在一行代码里面，如下所示

transition: property duration timing-function delay;

示例

transition: opacity 1s linear 2s;

4.浏览器支持

transition 是css3中的属性。仅支持以下浏览器：

Internet Explorer 10+

Firefox

Opera

Chrome

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

Animate.css

安利一下Animate.css 一款强大的预设css3动画库

animate.style/

优缺点

transition使用简单，能较好的实现过渡动画。

但是，无法处理一个组件中父子元素的联动动画。查看源码后，就可以知道原因。

因为，本质上他只能作用于特定指令所影响的特定元素。

过渡插件

PS:安利一个github上页面过渡插件

vue-router-transition

github.com/repairearth…

参考文章

Vue 源码解析之一：transition

blog.csdn.net/weixin_3439…

Vue 内置组件 transition 以及过渡动画

概述