一、概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。但有时候并不能满足我们现有需求时，这时候自定义进入、离开和列表的过渡效果。

二、transitio组件

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

# 适合的场景
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点

三、过渡中的类型

在进入/离开的过渡中，会有 6 个 class 切换，其中<transition>元素可以添加name属性。

# 组件说明
<transition name='xxx' >  需要添加过渡的内容  </transition>

# 类名说明
# name属性拼接上以下内容
xxx-enter (进入)过渡开始状态
xxx-enter-to (进入)过渡结束的状态
xxx-enter-active (进入)过渡时间、延迟、曲线

xxx-leave (离开)过渡开始状态
xxx-leave-to (离开)过渡结束的状态
xxx-leave-active (离开)过渡时间、延迟、曲线

四、项目中的使用

• 场景说明(首页HomeView.vue中的商品点击后，跳转到商品详情GoodsDedetailView.vue中
  

• HomeView组件

  # goodsDetailShow属性，即是用于控制商品详情的显示或隐藏的
  <transition name='slide-to-left'>
      <GoodsDetailView v-if='goodsDetailShow'></GoodsDetailView>
  </transition>

• App.vue组件(界面切换效果很多页面都需要，所以放置在这个位置)

  /* 从右边到左边 */
  /* 设置进入和离开的过渡时间*/
  .slide-to-left-enter-active,
  .slide-to-left-leave-active{
      transition: all 2s;
  }
  
  /* 商品详情虽然被隐藏，但还是距离屏幕左边是0，在设置显示时，即是过渡开始时，就让商品详情视图移到屏幕的右侧，从而达到从右到左出来的效果 */
  /* 商品详情页显示即距离屏幕左边为0，在设置隐藏时，即到过渡结束的状态，就是从屏幕左边到屏幕的右侧 */
  .slide-to-left-enter,
  .slide-to-left-leave-to{
      transform: translateX(100%);
  }