Анимировать мой & lt; tr & gt; при удалении строки в таблице

Я перевожу таблицу, управляемую JQuery, на VueJS (2.4.4)

Я хотел бы добавить небольшой переход + плавный переход, чтобы пользователь понял, что строка была удалена.

Вот мой стол:

<div class="container-fluid">
<table class="table table-togglable table-hover">
<thead>
<tr>
<th data-toggle="true">Name</th>
<th class="text-center" data-hide="phone">Federation</th>
</tr>
</thead>
<tbody>
@foreach($associations as $association) // This is Laravel blade
<association-item
:association="{{ json_encode($association) }}":url_edit="{{ json_encode(route('associations.edit', $association)) }}":url_delete="{{ json_encode(route('api.associations.delete', $association)) }}">
</association-item>
@endforeach
</tbody>
</table>
</div>

и внутри моего компонента шаблона, <association-item> является:

<template>
<tr>
<td>
{{ association.name }}
</td>
<td align="center">
<button type="submit" class="btn text-warning-600 btn-flat" @click="deleteItem(association.id)">
<i :class=spinnerOrIcon></i></button></td>
</tr>
</template>

Я попробовал это:

<template>
<transition name="fade" mode="out-in">
<tr>...</tr>
</transition>
</template>

с

<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
</style>

Но это не работает. Зачем???