плавный переход Nuxt/Vue на остальной части страницы при отображении и скрытии списка элементов

Question

У меня есть список элементов сетки и кнопка переключения между "видеть больше" и "видеть меньше". При щелчке по кнопке "подробнее" отображается весь список. при щелчке по кнопке "видеть меньше" отображаются только 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
    }
  }
})

https://jsfiddle.net/ghivalla/v5me216c/3/

Answer 1

Попробуй это

.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://vuejs.org/v2/guide/transitions.html