我试图在html表格行(vue.js)上进行转换(动画),但没有成功.下面是完整的例子
new Vue({
el: '#data',
data: {
items: [
{
data: 'd1',
more: false
},
{
data: 'd2',
more: false
},
]
}
});
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container-fluid" id="data">
<br>
<br>
<table border="1" class="table table-bordered">
<thead class="thead-inverse">
<tr>
<th>anim</th>
</tr>
</thead>
<tbody>
<template v-for="item, k in items">
<tr>
<td><button @click="item.more = !item.more" type="button"
v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
</tr>
<transition name="fade" >
<tr v-bind:key="item" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</transition>
</template>
</tbody>
</table>
</div>
我希望隐藏的表格行在显示时应该带有transition/animation on opacity属性,但什么都没有发生,我该怎么做?这是完美的工作在另一个元素,如跨度或其他.