Vue.js过渡：使用滑出动画时动画高度

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>

我设法为崩溃动画了。但是，我的问题是，如果您扩展第一个块，第二个块会立即跳到其最终位置。我希望第二个块在第一个块扩展的同时向下滑动。

有什么想法吗？

Answer 1

问题在于，在将transform添加到您的.list-item之后，由于.blocks属性的性质，您的布局不会重排。您可以了解约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'

Answer 2

您还可以在翻译的同时为margin属性设置动画。看到这个codepen example

基本上只是将enter和leave-to的CSS更改为类似的内容

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