javascript - v-if 上平滑的 vue 折叠过渡

Question

我正在努力尝试使用 v-if 顺利显示/隐藏内容的 vue 转换。虽然我了解 css 类和过渡，但我可以使用不透明度或翻译等方式使内容“平滑地”显示......但是一旦动画完成(或者更确切地说，当它开始时)，下面的任何 html 部分似乎“跳跃” '.

我正在尝试实现与 Bootstrap 4“折叠”类相同的效果 - 单击此处顶部的按钮之一:https://getbootstrap.com/docs/4.0/components/collapse/

随着隐藏部分的出现/消失，所有 html 内容都会随之“滑动”。

对于使用 v-if 显示的内容，是否可以使用 Vue 转换？ vue transitions 文档上的所有示例虽然具有出色的 css 过渡效果，但在过渡开始或完成后具有以下 html“跳转”。

我见过一些使用最大高度的纯 js 解决方案 - https://jsfiddle.net/wideboy32/7ap15qq0/134/

并尝试使用 vue:https://jsfiddle.net/wideboy32/eywraw8t/303737/

.smooth-enter-active, .smooth-leave-active {
  transition: max-height .5s;
}
.smooth-enter, .smooth-leave-to {
  max-height: 0 .5s;
}

谢谢!

Answer 1

我也有类似的任务。我发现没有 JS 是不可能做到的。所以我写了自定义转换组件(Reusable Transitions)，它对我有用:

Vue.component('transition-collapse-height', {
  template: `<transition
    enter-active-class="enter-active"
    leave-active-class="leave-active"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <slot />
  </transition>`,
  methods: {
    /**
     * @param {HTMLElement} element
     */
    beforeEnter(element) {
      requestAnimationFrame(() => {
        if (!element.style.height) {
          element.style.height = '0px';
        }

        element.style.display = null;
      });
    },
    /**
     * @param {HTMLElement} element
     */
    enter(element) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          element.style.height = `${element.scrollHeight}px`;
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterEnter(element) {
      element.style.height = null;
    },
    /**
     * @param {HTMLElement} element
     */
    beforeLeave(element) {
      requestAnimationFrame(() => {
        if (!element.style.height) {
          element.style.height = `${element.offsetHeight}px`;
        }
      });
    },
    /**
     * @param {HTMLElement} element
     */
    leave(element) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          element.style.height = '0px';
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterLeave(element) {
      element.style.height = null;
    },
  },
});

new Vue({
  el: '#app',
  data: () => ({
    isOpen: true,
  }),
  methods: {
    onClick() {
      this.isOpen = !this.isOpen;
    }
  }
});

.enter-active,
.leave-active {
  overflow: hidden;
  transition: height 1s linear;
}

.content {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="onClick">
    open/hide
  </button>
  <transition-collapse-height>
   <div v-show="isOpen" class="content">
     <br/>
     <br/>
     <br/>
     <br/>
   </div>
  </transition-collapse-height>
</div>