手写vue折叠面板平滑动画

手写vue折叠面板平滑动画。带箭头翻转动画

首先我要吐槽一波现在的帖子 没一点营养，说白了就是垃圾里边找垃圾

先把展开和收起的两个css类名放在这
  .arrowTransform{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .arrowTransformReturn{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }

template

<template>
  <div class="max">
    <div
      class="wrapper"
      v-for="(item,index) in list"
      :key="index"
      @click="clickContent(item,index)"
    >
      <div class="content">
        {{item.title}}{{index+1}}
        <img
          :src="imgs"
          :class="{open:item.disBol == true, close:item.disBol == false}"
        />
      </div>
      <transition name="sub-comments">
        <div v-if="item.disBol" class="a"></div>
      </transition>
    </div>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      list: [
        { title: "标题", disBol: false },
        { title: "标题", disBol: false },
        { title: "标题", disBol: false },
        { title: "标题", disBol: false },
        { title: "标题", disBol: false }
      ],
      imgs: "https://www.w3school.com.cn/i/eg_smile.gif"
    };
  },
  methods: {
    clickContent(el, index) {
      if (el.disBol == false) {
        // this._itemsinit()   //  如果需要手风琴模式
        // 打开动画
        el.disBol = true;
        console.log("打开动画", el.disBol);
        return;
      }
      if (el.disBol == true) {
        // 收起动画
        el.disBol = false;
        console.log("关闭动画", el.disBol);
        return;
      }
    },
    _itemsinit() {
      //  如果需要手风琴模式
      this.list.forEach((el, index) => {
        el.disBol = false;
      });
    }
  },
  mounted() {},
  computed: {}
};
</script>

css

<style scoped>
.sub-comments-leave-active,
.sub-comments-enter-active {
  transition: max-height 0.5s ease;
}
.sub-comments-enter,
.sub-comments-leave-to {
  max-height: 0;
}
.sub-comments-enter-to,
.sub-comments-leave {
  max-height: 1000px;
}

.a {
  width: 300px;
  height: 100px;
  border: 1px solid red;
}
.content {
  width: 200px;
  height: 50px;
  border: 1px solid aqua;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.open {
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(180deg);
  width: 40px;
  height: 40px;
}
.close {
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(0deg);
  width: 40px;
  height: 40px;
}
</style>