为什么折叠动画在 vue3 中不起作用？

Question

为什么 vue3js 中过渡动画不起作用？我看不到任何动画。我正在使用这个库https://github.com/ivanvermeyen/vue-collapse-transition

<template>
  <nav class="navbar color-dark section-padding">
    <span :class="this.$route.meta.connect ? 'navbar-toggler' : ''">
      <button class="border-0 navbar" @click="open()">
        <img :src="navgridImg" style="height: 26px; margin: 1vw" />
      </button>
    </span>

    <CollapseTransition >
      <div v-show="show" :class="showClass" id="navbarSupportedContent">
        jdlkajdlsajdlsjdlskajdlsakjdlsajjdlkajd
        lsajdlsjdlskajdlsakjdlsajjdlkajdlsajdlsjdlska
        jdlsakjdlsajjdlkajdlsajdlsjdlskajdlsakj
        dlsajjdlkajdlsajdlsjdlskajdlsakjdlsaj
      </div>
    </CollapseTransition>
  </nav>
</template>
<script>
  import { ref } from 'vue'
  
  import { CollapseTransition } from "vue-collapse-transition"

  export default {
    components: { CollapseTransition,  },
    setup() {
      const show = ref(false)
      const showClass = ref('collapse navbar-collapse')

      const open = () => {
        show.value = !show.value
      }

      return {
        show,

我认为我所做的与文档几乎相同，它非常简单但不起作用，我不知道发生了什么

Answer 1

@ivanv/vue-collapse-transition 是 Vue 2 的包，不适用于 Vue 3。您可以在 NPM 页面的标题下看到版本： https: //www.npmjs.com/package/@ivanv/ vue-折叠-过渡

我建议研究 Vue3 转换：https://vuejs.org/guide/built-ins/transition.html

您不应该只需要折叠动画的依赖项；）这是使用内置 Vue3 过渡的折叠动画的示例。

<template>
  <button @click="openClose">open/close</button>
  <Transition name="collapse">
    <div class="collapsableDiv" v-if="isShow">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis
      blandit congue. Etiam id porttitor eros. Interdum et malesuada fames ac
      ante ipsum primis in faucibus. Aenean ut convallis dui, vitae vehicula
      lacus. Phasellus id blandit urna. Phasellus molestie ex ut sagittis
      scelerisque. Quisque eleifend dui eu quam tempor, a finibus augue
      scelerisque.
    </div>
  </Transition>
</template>

<script setup>
import { ref } from "vue";
const isShow = ref(false);
const openClose = () => {
  isShow.value = !isShow.value;
};
</script>
<style>
.collapsableDiv {
  background-color: rgb(189, 189, 189);
  overflow: hidden;
  width: 250px;
}
.collapse-enter-active {
  animation: collapse reverse 500ms ease;
}
.collapse-leave-active {
  animation: collapse 500ms ease;
}
@keyframes collapse {
  from {
    max-height: 200px;
  }
  to {
    max-height: 0px;
  }
}
</style>

编辑：这个动画更好，因为不依赖于最大高度，它使用scaleY()代替。还修复了由于最大高度明显高于实际元素高度而导致动画反转延迟的问题。

<style>
.collapsableDiv {
  background-color: rgb(189, 189, 189);
  width: 250px;
  transform-origin: top;
}
.collapse-enter-active {
  animation: collapse reverse 500ms ease;
}
.collapse-leave-active {
  animation: collapse 500ms ease;
}
@keyframes collapse {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
</style>

干杯:)