我得到了一个网格项目列表,以及一个在“多看”和“少看”之间切换的按钮。单击“查看更多”按钮,将显示所有列表。点击少看,只显示3个项目。当显示所有项目时,我们得到了一个很好的过渡,但是当我们隐藏它们时,底部的所有元素都不会跟随运动。我怎样才能使过渡顺利,不要让用户在段落中间?
模板示例:
<div>
<transition-group name="list" class="grid">
<div v-for="(content,index) in contents" :key="index" class="card">
<h4>
{{index}}
</h4>
</div>
</transition-group>
<button @click="onClickSeeButton">
{{ seeButton }}
</button>
<p>
Some text...
</p>
</div>
我使用那些 css 属性进行过渡
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
}
脚本如下:
new Vue({
el: "#app",
data: {
els: [1,2,3,4,5,6,7,8,9,10,11,12], // from 0 to infinite
seeMore: true
},
computed: {
contents: function(){
return this.seeMore ? this.els.filter((el,index) => index < 3 ) : this.els
},
readButton: function(){
return this.seeMore ? 'see more' : 'see less'
}
},
methods: {
onClickReadButton: function(){
this.seeMore = !this.seeMore
}
}
})