2

我一直在寻找这个问题的解决方案很长时间，但我似乎无法找到这个问题的最佳解决方案。基本上我有一个手风琴，当用户打开它时，它应该轻轻滑下并有一个很好的过渡。

我很确定只有 css 才能做到这一点。如果我错了，请纠正我，但 css 转换在性能方面比 js 转换更好。

所以现在我面临的问题的HTML：

<transition name="slide-down">
  <ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
    <li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
      element
    </li>
  </ul>
</transition>

而CSS是：

.slide-down-enter-active, .slide-down-leave-active {
  transition: all .5s;
}

.slide-down-enter-to, .slide-down-leave {
  overflow: hidden;
  max-height: 100%;
}

.slide-down-enter, .slide-down-leave-to {
  overflow: hidden;
  max-height: 0;
}

这导致不流畅的过渡。滑下来好像没什么问题，但是滑上去就真的很卡顿，一点都不流畅！如果我设置max-height: 10rem它并没有让它变得更好。我希望有人可以调试帮助我解决这个问题，也许可以教育我更多关于 vue 转换和 js 与 css 转换的知识。

编辑：
只是为了澄清过渡本身应该只由css。手风琴的开口是用js的，很好。此外，如果能看到一个使用原生 vue-transition 组件的转换示例，那将是一件好事。

编辑 2：
这是一个代码框，它与我有同样的问题。 https://codesandbox.io/s/frosty-bash-lmc2f?file=/src/components/HelloWorld.vue

4

1 回答 1

5

另一个更新！！！ 为了实现JS过渡可以看一下官方文档来学习。无论如何，我不会实现花哨的计时机制，但在最简单的形式中，React 中的 JS 折叠转换将如下所示，我将其包含在现有的代码框中：

<template>
...
  <div>
    <button @click="jsOpen = !jsOpen">Open JS list</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:level-cancelled="leaveCancelled"
      v-bind:css="false"
    >
      <ul v-if="jsOpen" class="mt-2 text-sm flex flex-col space-y-2">
        <li v-for="i in 10" :key="i">item-{{ i }}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  ...
  methods: {
    beforeEnter(el) {
      el.style.height = 0;
      el.style.overflow = "hidden";
    },
    enter(el, done) {
      const increaseHeight = () => {
        if (el.clientHeight < el.scrollHeight) {
          const height = `${parseInt(el.style.height) + 5}px`;
          el.style.height = height;
        } else {
          clearInterval(this.enterInterval);
          done();
        }
      };
      this.enterInterval = setInterval(increaseHeight, 10);
    },
    afterEnter(el) {},
    enterCancelled(el) {
      clearInterval(this.enterInterval);
    },
    beforeLeave(el) {},
    leave(el, done) {
      const decreaseHeight = () => {
        if (el.clientHeight > 0) {
          const height = `${parseInt(el.style.height) - 5}px`;
          el.style.height = height;
        } else {
          clearInterval(this.leaveInterval);
          done();
        }
      };
      this.leaveInterval = setInterval(decreaseHeight, 10);
    },
    afterLeave(el) {},
    leaveCancelled(el) {
      clearInterval(this.leaveInterval);
    },
  },
};
</script>

更新： 在了解了 OP 的要求后，我试图玩不同的东西，我偶然发现了这篇关于 css-tricks的文章，其中详细解释了关于转换的更多细节，从那篇文章中提出的另一个非 js 解决方案如下所示，我将其包含在现有的stackblitz中：

.scale-enter-active,
.scale-leave-active {
  transform-origin: top;
  transition: transform 0.3s ease-in-out;
}

.scale-enter-to,
.scale-leave-from {
  transform: scaleY(1);
}

.scale-enter-from,
.scale-leave-to {
  transform: scaleY(0);
}

这里不是高度，而是针对 y 轴缩放。IT 还有一个副作用，它首先将容器扩展为完整大小，然后再更新（缩放）内容。

Vue v3.x -leave和V3-enter中的类重命名为和。看看这个stackblitz。-leave-from-enter-from

.slidedown-enter-active,
.slidedown-leave-active {
  transition: max-height 0.5s ease-in-out;
}

.slidedown-enter-to,
.slidedown-leave-from {
  overflow: hidden;
  max-height: 1000px;
}

.slidedown-enter-from,
.slidedown-leave-to {
  overflow: hidden;
  max-height: 0;
}

Vue v2.x 问题是您指定max-height为 100%，使用一些大于您预期的最大高度的值。将您的样式更新为：

.slide-down-enter-active,
.slide-down-leave-active {
  transition: max-height 0.5s ease-in-out;
}

.slide-down-enter-to,
.slide-down-leave {
  overflow: hidden;
  max-height: 1000px;
}

.slide-down-enter,
.slide-down-leave-to {
  overflow: hidden;
  max-height: 0;
}

它应该可以工作。看看这个代码框演示。

于 2020-10-05T17:47:51.477 回答