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

Question

我正在使用vue.js和vue-router构建单页面应用程序..现在链接正常工作，但我想使用v-transition添加转换。

但根据文件

  

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

...
<div id="ProductDesc">
                            <a href="javascript:void(0);" onClick="loadStyle('imageView','http://tendeep.vaesite.net/__data/03cc09aa3700a50b17caf5963821f603.jpg', '',  '',  '')"><h5 id="productTitle">Split Sport Longsleeve T-shirt</h5></a>
                            <h5 id="productPrice">$42.00</h5>
                            <br style="clear:both;" /><br />
                        Style # 53TD4141 Screenprinted longsleeve cotton tee.</div>
...

所以从技术上讲，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中插入一个元素。