Is there a way to create a smooth transition when showing and hiding grid items on a webpage? Currently, I have a list of grid items with a button that toggles between "see more" and "see less". When the user clicks on "see more", all items are displayed, and when they click on "see less", only 3 items are shown. The transition when displaying all items is nice, but as we hide them, the elements at the bottom do not follow the motion. How can I ensure a fluid transition and prevent leaving the user in the middle of the paragraph?
Here is an example template:
<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>
I have used the following CSS properties for the transition:
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
}
The script looks like this:
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
}
}
})
Check out the code demo here.