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类的过渡动画会在内容区域的显示和隐藏之间平滑切换。