vue transition和canvas的冲突问题

做单页面的时候，经常会用到淡入淡出之类的animate效果，来增加用户的体验。使用transition后，引出了和画布之间的冲突的问题。

<template>
  <div id="app">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <component class="child_view" :is="pageName" />
    </transition>
    <rh-root />
    <div class="open_debug" @click="openDebug()"></div>
  </div>
</template>

项目的整体前提，先通过create.js的预加载，将图片都下载到本地。通过组件的名字去加载页面。页面只见切换，通过设置pageName做切换。切换过程使用了transition的淡入淡出效果。当使用淡出效果，由于动画时间有1秒钟左右，如此会造成组件获取到的不是当前的组件。造成拿到的画布不是当前的画布。

ref和getElementById虽然拿到的都是dom的节点。但是还是有本质的区别。ref拿到的肯定是当前组件或者页面的dom节点。getElementById有可能会拿到的不是当前的原生节点。就比如上面的由于动画的延迟效果，导致原因。从消耗的方面来说ref更优于getElementById。在VUE的框架下，尽量的使用vue的方法，会更贴近开发。