持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

写在前面

前面通过两篇文章介绍了数字孪生应用相关的技术，对于二维的数字孪生可视化应用来说，由于相对于三维，会显得比较朴实无华，那么，他主要强调的就应该是更加好看，更加顺畅的体验效果，而站在一个使用者的角度来说，在页面间的切换过程中过渡动画是否自然，过渡时间是否合适成了非常重要的评判标准。那么今天就用这一篇文章，简单介绍下数字孪生可视化产品中主要如何做到页面切换的过渡更加自然！

切换动画分析

批注 2022-06-09 224309.png

如上图所示，我们大致的排版是分为左右两个板块，那么动画该做成什么效果呢？应该是左边的图表由左边进入和退出，而右边的图表由右边进入和退出。也就是说，当我们切换路由时，我们需要先让表格从两边退出，然后加入新页面后，新页面的表格从两边进入。

动画实现 1.0

分析完了需求，那现在就要发挥我们的技能了，该怎么做呢，在 vue 中，那首选肯定是 <transition> 了。我们可以给每个表格加上<transition>然后通过在 mounted 中控制对应的变量，实现<transition>动画。

// 页面结构
<template>
  <div class="Overview-container">
    // 左边表格
    <div class="left-box">
      <transition name="left-fade" >
        <div class="inner-box" v-if="show"></div>
      </transition>
      // 3个表格相同，略
    </div>
    // 右边表格与左边相同，略
  </div>
</template>
// transition 动画
<style>
  .left-fade-enter, .left-fade-leave-to {
    transform: translate(-150%, 0)
  }
  .left-fade-enter-active,
  .left-fade-leave-active {
    transition: all .3s ease-out;
  }
</style>
// 控制函数
enter(){
  setTimeout(() => {
    this.show = true
  }, 500);
}

GIF 2022-6-9 23-05-08.gif

从上图可以看出进入的效果是有了，可是退出的效果并没有出来，为什么呢？答案很明显，当我们点击了 header 中的 navItem 时，页面进行了路由跳转，直接替换了 route-view 的内容，导致了我们无法看到退出的 transion 动画，那么，该怎么做呢？看看接下来 2.0 的实现方案

动画实现 2.0

为了避开 1.0 的坑，这里我们采取一个路由跳转延迟的方案。当点击 navItem 时立刻更新 store 的 routeChange 值，并延迟执行路由跳转，然后页面通过监听 routeChange 的变化，执行退出函数实现退出动画，这样，就避免了动画还没运行，页面就已经被销毁的尴尬局面

// store
export default new Vuex.Store({
  state: {
    routeChange: ''
  },
  mutations: {
    // 更新
    update(state,param){
      state.routeChange = param
    }
  },
})
// 监听
computed: {
  routeChange(){
    return this.$store.state.routeChange
  }
},
watch: {
  routeChange(){
    this.leave()
  }
},
// 退出函数
methods: {
  leave(){
    this.show = false
  }
}
// navItem 点击触发函数
goto(item){
  this.active = item
  // 更新 routeChange
  this.$store.commit('update', item.path)
  // 路由跳转
  setTimeout(() => {
    this.$router.push({path: item.path});
  }, 1000);
}

GIF 2022-6-9 23-16-56.gif

终于，退出动画已经如愿加上，可如果你是一个产品使用者，你能够接受这个产品吗？在我看来，还是显得有些僵硬，僵硬的点在于，一方面是速度，一方面是我觉得还有更加好看的效果，什么效果呢，我想要三个表格分开进入与分开退出（咱就是说一定要这样给自己加需求吗！！！！），接下来，看 3.0 最终版实现！

动画实现 3.0

想要做到分开进入，那最直接的办法就是3个表格分开三个参数控制，然后通过 settimeout 控制时间，就可以轻松实现表格进入时机的自由把控，那么具体怎么写呢，看代码演示

// 修改页面结构
<div class="left-box">
  <transition name="left-fade" >
    <div class="inner-box" v-if="showList[0]"></div>
  </transition>
  <transition name="left-fade">
    <div class="inner-box" v-if="showList[1]"></div>
  </transition>
  <transition name="left-fade">
    <div class="inner-box" v-if="showList[2]"></div>
  </transition>
</div>
// 右表格类似，略

// 标志位
data() {
  return {
    showList: [false,false,false]
  }
},
// 控制函数
enter(){
  this.showList.forEach((item,i) => {
    setTimeout(() => {
      this.$set(this.showList, i, true)
    }, 100+70*i);
  });
},
leave(){
  this.showList.forEach((item,i) => {
    setTimeout(() => {
      this.$set(this.showList, 2-i, false)
    }, 70*i);
  });
}