在删除表格中的行时动画我的动画

Question

我正在将由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>

但它不起作用。为什么？？？