Vue JS Quasar 框架过渡渲染与路由器视图冲突答案

【问题标题】：Vue JS Quasar framework transition rendering collision with router-viewVue JS Quasar 框架过渡渲染与路由器视图冲突
【发布时间】：2017-10-10 18:48:15
【问题描述】：

围绕路由器视图的 q-transition 存在问题。当转换发生时，新内容会在旧内容离开 DOM 之前出现。它将新内容放在现有元素下方，然后在旧内容最终消失后弹出。这是一个已知问题还是我只是做错了什么？有解决办法吗？

<q-transition appear enter="bounceInLeft" leave="bounceOutRight">
  <router-view></router-view>
</q-transition>

您可以在下面看到新内容出现低位，然后重新绘制。

谢谢

【问题讨论】：

标签： vuejs2 animate.css quasar-framework

【解决方案1】：

通过查看底层 Vue 动画/过渡功能找到了答案。需要按照此处指定的方式设置 mode="out-in"：https://vuejs.org/v2/guide/transitions.html

【讨论】：