#持续划水中#
本文章仅用作于个人学习笔记复制代码
划重点 —— 个人笔记!(◔◡◔)
参考文章:(墙)Vuejs transition on table rows
最终效果图:
今天在学习 Vue的过渡&动画 的时候遇到了一个困扰了一下午的问题。
在根据官方文档提供的 列表过渡 中尝试给之前写的一个表格demo中的<tbody>下的<tr>行添加过渡效果的时候发现,过渡并没有出现。看着列表过渡的介绍仿佛代码也没有错啊(๑òᆺó๑)。代码如下:
/* 过渡的自定义的类名 */
.demo-enter,
.demo-leave-to {
opacity: 0;
transform: translateY(20px);
}
.demo-enter-active,
.demo-leave-active {
transition: all 0.5s ease;
}
.demo-move {
transition: all 0.5s ease;
}
<!-- HTML table部分 -->
<table class="table table-striped table-inverse table-bordered">
<thead class="thead-inverse">
<tr>
<th>ID</th>
<th>品牌名称</th>
<th>添加时间</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<transition-group name="demo" appear>
<tr v-for="item in getFilter(key)" :key="item.id">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.mTime}}</td>
<td><a href="javascript:;" @click="handleDelect(item.id)">删除</a></td>
</tr>
</transition-group>
</tbody>
</table>复制代码
对比官方文档仍没找到错误,于是打开审查元素,发现......
这个空的span标签(红框位置)是哪来的???
<tbody>下不是应该有一个由transition-group默认生成的<span>标签包着的吗?咋不见了??难道是渲染到了上面莫名其妙出来的那个<span>标签那里了???
为了验证这个&