实现的简单折叠展开动画效果示例 vue

在Vue.js中，我们同样可以利用`vue-animate`或`v-enter-active/v-leave-active`指令结合过渡（transitions）来实现基础的折叠和展开动画。这里是一个简单的例子：

首先，你需要安装`vue-animate`包，如果还没有安装，可以在项目里运行：

npm install vue-animate
# 或者
yarn add vue-animate

然后在组件中使用它：

<template>
  <div class="foldable">
    <button @click="toggleExpand">点击展开</button>
    <transition name="fade" v-if="showContent">
      <p>{{ content }}</p>
    </transition>
  </div>
</template>

<script>
import { animated, useAnimate } from "vue-animate";

export default {
  components: {
    animated
  },
  data() {
    return {
      showContent: false,
      content: "这是隐藏的内容"
    };
  },
  methods: {
    toggleExpand() {
      this.showContent = !this.showContent;
    }
  },
  directives: {
    useAnimate
  }
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
}

.foldable {
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  height: 0; /* 或者使用max-height: 0来适应高度的变化 */
}
.fade-enter-active, .fade-leave-active {
  opacity: 1;
  height: auto; /* 展开后的正常高度 */
}
</style>

在这个例子中，当`showContent`变为`true`时，元素会从透明且高度为0逐渐显示；反之，当`showContent`变为`false`时，元素会从完全可见慢慢消失。