javascript - Vue.js 转换 : animate height while using slide out animation

Question

我的页面上有许多可以折叠的元素。这是一个 codepen来说明。

Vue.component('block', {
  template: '#block',
  props: [ 'title', 'items', 'collapsed' ],
});

new Vue({
  el: '#app',
  data: {
    first: [ 
      { name: 'Item 1' }, 
      { name: 'Item 2' }, 
      { name: 'Item 3' }
    ],
    second: [
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' }
    ]
  }
});

#app {
  display: flex;
  flex-direction: column;
}
.block {
  $padding: 10px;
  margin: 20px;
  .title {
    color: white;
    background: grey;
    padding: $padding;
    font-weight: bold;
    font-size: 22px;
    cursor: pointer;
  }
  .list {
    position: relative;
    z-index: -1;
    padding: $padding;
    font-size: 16px;
    border: 1px solid lightgrey;
  }
  .list-item:not(:last-child) {
    padding-bottom: $padding;
  }
}

.slide-out-enter-active,
.slide-out-leave-active {
    transition: all 0.3s;
}

.slide-out-enter,
.slide-out-leave-to {
    opacity: 0;
    transform: translateY(-40px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <block :items="first" title="First block"></block>

  <block :items="second" title="Second block"></block>
</div>

<script type="text/x-template" id="block">
  <div class="block">
    <div class="title" @click="collapsed = !collapsed">{{ title }} (click to toggle)</div>
    <transition name="slide-out">
      <div v-if="!collapsed" class="list">
        <div class="list-item" v-for="item in items">
          {{item.name}}
        </div>
      </div>
    </transition>
  </div>
</script>

我设法为崩溃设置了动画。然而，我的问题是，如果你展开第一个 block ，第二个 block 会立即跳到它的最终位置。我希望第二个 block 在第一个 block 扩展时向下滑动。

有什么想法吗？

Answer 1

问题是，在将 .list-item 添加到 .blocks 后，由于 transform 属性的性质，您的布局不会回流您可以阅读有关可用于您正在做的事情的 3 种差异技术 here .

我的建议是改用 min-height 属性并摆脱 Vue 转换并简单地切换 .list 节点上的类。以下是您需要进行的调整:

CSS:

  // strip all of the .slide-out-* classes

  .list {
    ....
    max-height: 100px;
    transition: all 1s;
  }

  .block .list.is-collapsed {
    transition: all 1s;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

HTML:

删除标签&

<div class="list" :class="{'is-collapsed': collapsed}">    <--- removed 'v-if'