Day 28. F2E-过渡动画

系列文接近尾声，专案最後要来做一个过渡动画效果

我们要做的效果是向左/右滑入滑出，效果可以参考 Vue-过渡模式

搭配 Vue Router 做出路由的过渡动画效果，参考 Vue Router-基於路由的动态过渡

<transition :name="transitionName">
  <router-view></router-view>
</transition>

这篇是我觉得做的最有成就感的，因为平常不会去接触到任何动画相关的效果，公司觉得系统能用就好，动画等於是多的，有就很好没有也没差

台湾公司普遍都是这样的心态~所以CSS才会被列为选配技能...

#过渡类名

Vue 本身有个 transition 组件提供给内部组件加上 进入/离开 的动画效果，而且非常方便又很好理解

组件 进入/离开 所对应的CSS有6个:

• 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被删除)，在过渡/动画完成之後移除。

截自Vue-过渡的类名

简单来说，就是分为 进入前/中/後 及 离开前/中/後 6个状态所对应的CSS

官网下方有流程图说明:

如果 transition 组件没有赋予 name 属性，则预设就是抓上面六个CSS。
如果有赋予 name 属性，例如 name="transitionName"，则抓的CSS前缀会变为 transitionName，例如进入前的CSS就是 .transitionName-enter

#自定义类名

接着我们可以根据上面对应的状态来做自己的过渡CSS
需要做的效果分为四种，以四种效果用到的状态分别定义类名:

• 向左滑入
  • 进入前: slide-left-enter
  • 进入中: slide-left-enter-active
• 向左滑出
  • 离开中: slide-left-leave-active
  • 离开後: slide-left-leave-to
• 向右滑入
  • 进入前: slide-right-enter
  • 进入中: slide-right-enter-active
• 向右滑出
  • 离开中: slide-right-leave-active
  • 离开後: slide-right-leave-to

不会用到 进入後 及 离开前 的状态，就不定义它们了!!

一个过渡动画会使用到两个效果，以官方这个例子来说，就包含了两个元素，一个向左滑入，另一个向左滑出

#向左滑入

我们就先以 向左滑入 开始说明!!

#进入前

向左滑入 的 进入前 ，CSS属性设定为:

.slide-left-enter {
  opacity: 0;
  transform: translate(100%);
  position: absolute;
}

• opacity: 元素透明度，值范围[0.0~1.0]，代表完全透明到完全不透明
  参考MDN-opacity
• transform: 可以修改 CSS 可视化格式模型的空间维度，让元素可以被平移、旋转、缩放和倾斜
  参考MDN-transform
  • translate(x,y): 将元素在二维向量上重新定位，x表示向右移动，y表示向下移动
    这里设定的100%表示元素向右移动了元素本身宽度的100%
• position: 指定元素的定位方式
  • absolute: 绝对定位
    这里使用绝对定位让元素不预留空间

加上这三个CSS属性让元素在进入前的状态为「完全透明」、「在右侧100%」

#进入中

进入中的CSS设计为:

.slide-left-enter-active {
  transition: 0.5s;
}

• transition: 定义元素在两种状态切换时的转场效果，可以一次设定所有，也可以以逗号隔开分别设定
  这里设定的0.5s表示所有效果都设定0.5秒转换完毕

在滑入之後，进入前的 slide-left-enter 这个CSS会被移除
也就是说透明度会回到预设1.0，定位也会回到初始值
而透明度从 0 变为 1.0 两个状态之间的改变会在0.5秒完成，同理可证定位的状态改变

#其他效果

其他的效果都是一样的设计方式，只有左右位移不同
例如 向左滑出 在离开後的CSS就会是:

.slide-left-leave-to {
  opacity: 0;
  transform: translate(-100%);
  position: absolute;
}

代表离开後的位移量会是向右-100%(也就是向左100%)

附上所有效果的CSS:

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: 0.5s;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate(100%);
  position: absolute;
}
.slide-right-enter,
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-100%);
  position: absolute;
}

#定义transitionName

在包 transition 之前，我们先来定义要使用向左/右滑哪个transitionName
在定义之前就必须先了解它们的意义，以Google的登入过渡效果来说:

• 向右滑 代表 上一步
• 向左滑 代表 下一步

那什麽时候应该向左什麽时候该向右呢?
回到我们的页面流程，基本上有4条路线:

• 从未登入过
  • [输入帐号] -> 继续 -> [输入密码]
• 曾经登入过
  • [选择帐号] -> 点帐号 -> [输入密码]
  • [选择帐号] -> 使用其他帐户 -> [输入帐号] -> 继续 -> [输入密码]
• 已登入但要登别的帐号
  • [验证帐号] -> [输入密码]

可以看出来每条路线都是往 [输入密码] 走，所以输入密码就代表着下一步
而过程中有个插曲是 [选择帐号] 到 [输入帐号]，这个也会是下一步

所以我们可以这样写，只要前往 [输入密码] 就向左滑，另外从 [选择帐号] 到 [输入帐号] 也是向左滑，其他都是向右滑

定义的方式写在 watch $route 监听路由改变的事件上:

watch: {
  $route: {
    handler: function(to, from) {
      ...
      this.transitionName = "slide-right"; //预设向右滑
      switch (to.name) {
        case "KeyinUser":
          ...
          //如果是选择帐号到输入帐号就向左滑
          if (from.name === "ChooseUser") {
            this.transitionName = "slide-left";
          }
          break;
        case "KeyinPswd":
          //输入密码都是向左滑
          this.transitionName = "slide-left";
          break;
        ...
      }
    },
    immediate: true,
  },
},
data() {
  return {
    transitionName: "",
  };
},

#包上transition

最後将我们要做过渡动画的元素也就是 router-view 用 transition 包起来吧!!

<transition :name="transitionName">
  <router-view
    ...
  ></router-view>
</transition>

#结果

包好就完成罗~
来看看最後的画面吧!!

• 从验证开始
  
• 从选择帐号开始
  

今日重点:

• 使用 Vue-过渡 搭配 Vue Router-过渡动效 实作过渡动画效果
• 使用 transition 来包需要过渡动画的元素
• 元素包含 进入前/中/後 离开前/中/後 6个状态及对应的CSS类名
• transition 可加上 name 属性搭配自定义类名
• 使用 watch $route 监听路由事件来定义要使用的过渡动画

眼尖的会发现过渡动画元素已经超出卡片组件了!!
这个问题留到明天吧~

有需要改进或是任何意见建议欢迎下面留言~