vue 过渡动画 展开折叠

以下是使用Vue实现展开折叠过渡动画的示例代码：

<template>
  <div>
    <button @click="isShow = !isShow">Toggle</button>
    <transition name="fade">
      <div v-if="isShow">
        <p>这是要展示的内容</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在上述代码中，我们使用了Vue的`<transition>`组件来实现过渡动画效果。当`isShow`为`true`时，`<div>`中的内容会展示出来，并且会触发`fade-enter-active`和`fade-enter`类的过渡动画效果；当`isShow`为`false`时，`<div>`中的内容会消失，并且会触发`fade-leave-active`和`fade-leave-to`类的过渡动画效果。

相关问题

如何在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`状态会切换，触发相应的过渡效果。

vue 折叠展开效果 横向

在Vue中实现横向的折叠展开效果通常会使用v-if或v-show指令配合CSS样式来控制元素的显示状态。例如，你可以创建一个组件，其中包含一个标题和一个内容区域，默认情况下，内容区域隐藏：

<template>
  <div class="card">
    <button @click="toggleContent">点击切换</button>
    <transition name="slide-fade" v-if="showContent">
      <div class="content">
        这是展开的内容...
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false,
    };
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent;
    },
  },
};
</script>

<style scoped>
.card {
  width: 200px;
}

.content {
  display: none; /* 默认隐藏 */
  transition: all 0.5s ease-in-out;
}

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: transform 0.5s ease-in-out;
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(-100%);
}
</style>

在这个例子中，当用户点击按钮时，`toggleContent`方法会被调用，改变`showContent`的状态。同时，`.slide-fade` CSS类的过渡动画会在内容区域的显示和隐藏之间平滑切换。