Vue 如何在 transition-group 内控制div的动画

Question

目前报错：[Vue warn]: <transition-group> children must be keyed: <div>我想在点击tab上方栏目时通过显示隐藏.tab-content内的div，这个过程想展现动画刚开始学vue请不要见笑<div class="tab-content"><transition-group enter-active-class="animated tada" leave-active-class="animated bounceOutRight" ><div class="con" v-show="cont==0">content1</div><div class="con" v-show="cont==1">content2</div><div class="con" v-show="cont==2">content3</div><div class="con" v-show="cont==3">content4</div></transition-group></div>

Answer 1

1.transition-group 需要对子元素绑定key属性。key通常为不重复的字符串或数字
2.transiton以及transition-group组件需要通过name属性指定过渡动画
如果不太了解vue组件切换过渡动画，建议看下文档。或者可以直接用 vue2-animate
以下是一个示例：
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
</transition-group>