显示和隐藏元素列表时，在页面的其余部分平滑 Nuxt/Vue 过渡答案

【问题标题】：smooth Nuxt/Vue transition on the rest of the page when displaying and hidding a list of elements显示和隐藏元素列表时，在页面的其余部分平滑 Nuxt/Vue 过渡
【发布时间】：2019-12-06 09:42:38
【问题描述】：

我得到了一个网格项目列表，以及一个在“查看更多”和“查看更少”之间切换的按钮。单击“查看更多”按钮后，将显示所有列表。点击少看，只显示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/

【问题讨论】：

这仍然不适合你吗？我刚去了 jsfiddle，它似乎崩溃了，看不见了，把段落文本恢复了。
是的，但实际上我想要一个平滑的过渡，卡片在 1 秒内消失，不透明度为 0，然后文本大致跳到顶部，

标签： javascript vue.js css-transitions nuxt.js vuejs-transition-group

【解决方案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

【讨论】：

感谢您的帮助！