问下大神们Vue关于transition的一个问题trans - 前端吧

level 7

aa4980459 楼主

问下大神们Vue关于transition的一个问题
transition-group用于列表过渡，基本上教也是这样教的，突然有一天做一个demo,想为动态生成的表格加一个动画，transition-group包裹tr标签，tr用v-for循环动态生成一行行数据，结果没有任何效果，而且更诡异的是transition-group直接跑到table外面去了 [喷]

我本来说把transition-grouo用tag属性变成tbody，结果这个编译的tbody直接跑到table外面了，这是什么情况？
能不能用transition为表格加动画呢

2020年05月24日 01点05分 1

level 7

aa4980459 楼主

有没有人啊，网上都找不到 [喷]

2020年05月24日 02点05分 2

level 7

aa4980459 楼主

可能看描述不太清楚，我贴个图片

2020年05月24日 02点05分 3

level 1

我真的很强💢

把浏览器的html结构也发出来啊没动画效果有没有在style里定义v-enter-active,v-leave-active里的过渡属性

2020年05月24日 04点05分 4

aa4980459

我用手机敲的，把动画绑定部分省了，我别的不变，只把tr变成li 过渡动画一下出来了，所以可以排除动画绑定问题

2020年05月24日 05点05分

我真的很强💢

@aa4980459 你把tr 设置为块级元素试试 display：inline-block

2020年05月24日 05点05分

我真的很强💢

@aa4980459 最好把你写的代码贴出来啊不然你的问题只能猜可能是你用transform 但是tr不是块级元素没用所以换li就行了

2020年05月24日 05点05分

aa4980459

@我真的很强💢 三楼有核心部分的代码，关键问题在于编译之后transition-group根本没有包裹住所有tr 直接被赶出table 标签了，如果是li标签则没有这问题

2020年05月24日 07点05分

level 5

D8男爵

<tbody is="transition-group" name="list" >
<tr key="1" v-for="(item , index) in list" @click="change(index)" v-show="item.status == 1">
<td >{{item.number}}</td>
</tr>
</tbody>
好像要这么用你试试？

2020年05月24日 08点05分 5

aa4980459

好的我到时候回去先试一下

2020年05月24日 08点05分

level 7

aa4980459 楼主