Animate my <tr> when deleting a row in a table - php

Question

I'm migrating a table managed by JQuery to VueJS ( 2.4.4 )
I would like to add a small fade out + slide transition so the user understand the row has been deleted.
Here is my table:
<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>
and inside my component template, <association-item> is:
<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>
I tried this:
<template>
<transition name="fade" mode="out-in">
<tr>...</tr>
</transition>
</template>
with
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
</style>
but it is not working. Why???