将 v-transition 应用于 vue.js(v 1.0.1) 路由器视图

Question

我正在构建一个单页应用程序，使用 vue.js 和 vue-router.. 现在链接可以工作，但我想使用 v-transition 添加过渡。

但根据文档

更重要的是，组件元素上的非流控制指令、非属性属性和转换将被忽略，因为没有根元素可以将它们绑定到 - vue.js components

<router-view class="bounce" v-transition="bounce" transition-mode="out-in"></router-view>

所以从技术上讲，router-view 标签中的 v-transition 将被忽略，因为它是一个 Fragment 实例..

所以知道我可以在哪里放置 v-transition 以在路线更改时应用转换吗？

Answer 1

在你的组件中至少定义一个路由节点：

<router-view class="bounce">
    <div v-transition="bounce" transition-mode="out-in">
    </div>
</router-view>

如果你想应用过渡或 v-show，Vue 需要在 DOM 中插入一个元素。