为什么折叠动画在 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 页面的 header 下看到版本： https://www.npmjs.com/package/@ivanv/vue-collapse-transition

我建议研究 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>

编辑：由于不依赖于 max-height，此动画效果更好，它使用 scaleY() 代替。还修复了由于 max-height 明显高于实际元素高度而导致动画反转延迟的问题。

<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>

干杯:)

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

Why does the collapsed-animation not work in vue3?

css

vuejs3