[Vuejs]-Vue.js transitions: animate height while using slide out animation

The issues is that your layout does not reflow due to the nature of the transform property after the .list-items are added to your .blockss. You can read about 3 diff techniques that could be used for what you are doing here.

My suggestion to use the min-height property instead and get rid of the Vue transition and simply toggle the class on your .list node. Below are the adjustments that you’d need:

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:

remove tags &

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

You could also animate the margin property at the same time as translating. See this codepen example

basically just change your enter and leave-to css to something like this

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