I got a list of grid items , and a button switching between “see more” and “see less”. On click on the “see more” button, all the list is displayed. on click on the see less, only 3 items are displayed. we got a nice transition when displaying all the items, but when we hide them, all the elements on the bottom don’t follow the motion. How can I make the transition smooth and don’t leave the user at the middle of the paragraphe ?
template exemple :
<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 used those css properties for the transition
.list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to { opacity: 0; }
the Script goes as follow :
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 } } })
https://jsfiddle.net/ghivalla/v5me216c/3/
Advertisement
Answer
Try this
.list-enter-active, .list-leave-active { transition: all 1s; opacity: 1; } .list-enter, .list-leave-to { opacity: 0; height: 0; }
https://jsfiddle.net/w4v9g6us/
Also here is a good place to read more about vue and transitions https://v2.vuejs.org/v2/guide/transitions.html