如何在Vue中使用过渡动画展现折叠效果？

在Vue中，要添加过渡动画展示折叠效果，可以利用Vue的内置插件Vue Transition。首先，在项目中安装它：

npm install vue@next vue-transition-group

然后在模板中应用过渡：

<template>
  <transition name="fold-animation" mode="out-in">
    <div v-if="isFolded" class="折叠-content">
      <!-- 展示内容 -->
    </div>
  </transition>
  <button @click="toggleFold">折叠/展开</button>
</template>

<!-- 添加一个全局样式表，定义动画样式 -->
<style scoped>
.fold-animation-enter-active,
.fold-animation-leave-active {
  transition: all 0.5s ease;
}

.fold-animation-enter,
.fold-animation-leave-to {
  height: 0; /* 或者设置你想要的折叠样式 */
}
</style>

在这个例子中，我们设置了两个关键帧(`enter`和`leave`)，当元素进入或离开视图时，会触发这些样式变化。`mode="out-in"`表示同时处理进入和离开的过渡效果。

在JavaScript里：

<script>
export default {
  data() {
    return { isFolded: true };
  },
  methods: {
    toggleFold() {
      this.isFolded = !this.isFolded;
    }
  }
};
</script>

当你点击按钮时，`isFolded`状态会切换，触发相应的过渡效果。