[英]smooth Nuxt/Vue transition on the rest of the page when displaying and hidding a list of elements
我得到了一個網格項目列表,以及一個在“多看”和“少看”之間切換的按鈕。 單擊“查看更多”按鈕,將顯示所有列表。 點擊少看,只顯示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
}
}
})
嘗試這個
.list-enter-active, .list-leave-active {
transition: all 1s;
opacity: 1;
}
.list-enter, .list-leave-to {
opacity: 0; height: 0;
}
https://jsfiddle.net/w4v9g6us/
這里也是閱讀更多關於 vue 和轉換的好地方https://v2.vuejs.org/v2/guide/transitions.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.