vue.js,table标签(表格)使用过度transition组件出错
table标签在vue之中可能比较特殊吧~,table标签里面的transition的用法和在table标签中套组件有点相似。解决办法:<style>.list-enter-active {transition: all .3s ease;}.list-leave-active {transition: all .8s cubic-bez
·
table标签在vue之中可能比较特殊吧~,table标签里面的transition的用法和在table标签中套组件有点相似。
解决办法:
<style>
.list-enter-active {
transition: all .3s ease;
}
.list-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.list-enter, .list-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
<div class="demo">
<div >点击数字隐藏点击列</div>
<table>
<tbody is="transition-group" name="list" >
<tr key="1" v-for="(item , index) in list" @click="change(index)" v-show="item.status == 1">
<td >{{item.number}}</td>
</tr>
</tbody>
</table>
{{show}}
</div>
<script>
var vue = new Vue({
el: '.demo',
data: {
list:[{'status':1,'number':2333},{'status':1,'number':6666}],
show:true,
},
methods:{
change:function(index){
this.list[index].status = 2;
}
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)