vue.js - 表格行的VueJS折叠过渡

Question

我正在尝试为表格行添加向上/向下滑动过渡。我是 VueJS 动画的新手。有人可以告诉我如何实现这一目标吗？我发现了几个使用淡入/淡出行的相同示例，我试图从中向上滑动/向下滑动。但这对我不起作用。感谢是否有人可以帮助我。谢谢！

表.vue

<table>
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<transition name="slide">
<tr class="expandable-section">
<td colspan="4">
Expand content
</td>
</tr>
</transition>
</tbody>
</table>

样式.scss

.slide-leave-active,
.slide-enter-active {
  transition: opacity 0.3s ease;
}
.slide-enter {
    opacity:0
}
.slide-leave-to {
    opacity:0
}

我正在使用淡入淡出动画向上滑动向下折叠部分。我只需要向上滑动和向下滑动动画。

标签： vue.jsanimation