CSS 展开收起 样式

效果：展开、收起

一、 效果一

代码：

<template>
  <div class="container">
    <div class="head-wra">
      <div>名称</div>
    </div>
    <div class="table-wra" :class="{ expandTab: isExpand }">
      <div v-show="isExpand">
        <div class="list-con">
          <div>列1</div>
          <div>列2</div>
          <div>列3</div>
          <div>列4</div>
          <div>列5</div>
          <div>列6</div>
          <div>列7</div>
          <div>列8</div>
          <div>列9</div>
          <div>列10</div>
          <div>列11</div>
          <div>列12</div>
          <div>列13</div>
        </div>
      </div>
    </div>
    <div class="bottom-exp" @click="expand">
      <div v-if="isExpand">收起</div>
      <div v-else>展开</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "extend",
  data() {
    return {
      isExpand: true,
    };
  },
  methods: {
    expand() {
      this.isExpand = !this.isExpand;
    },
  },
};
</script>

<style  scoped>
.container {
  width: 240px;
  max-height: 200px;
  overflow: auto;
  background: #ccc;
}
.head-wra {
  background: green;
}
.list-con {
  height: 100px;
  overflow: auto;
}
/* 添加动画 */
.table_wra {
  padding-left: 15px;
  padding-right: 15px;
  height: 0px;
  transition: height 0.2s;
}
.expandTab {
  height: 100px;
}
.bottom-exp {
  background: green;
  z-index: 4;
}
</style>

二、效果二：

<template>
  <div>
    <div>这是名称名称名称</div>
    <div class="box" :class="{ expandBox: !isExpand }">
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
      <div>12121212121</div>
    </div>

    <div @click="goUpDown" class="btn-con">
      <div v-if="isExpand">收起</div>
      <div v-else>展开</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "eventDetail",
  components: {},
  data() {
    return {
      isExpand: true,
    };
  },
  methods: {
    goUpDown() {
      this.isExpand = !this.isExpand;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.box {
  max-height: 100px;
  transition: max-height ease-in 0.2s;
  border: 1px solid red;
  width: 200px;
  overflow: auto;
}

.expandBox {
  max-height: 40px;
  min-height: 40px;
  overflow: auto;
  transition: max-height ease-out 0.2s;
}

.btn-con {
  margin-top: 20px;
}
</style>

三、效果三：高度不固定

封装过渡效果的 js 文件，在需要的地方当做组件使用(不再需要css与其它逻辑)，使用 import 引入

封装过渡效果的 js 文件：

const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
  "before-enter"(el) {
    el.style.transition = elTransition;
    if (!el.dataset) el.dataset = {};

    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;

    el.style.height = 0;
    el.style.paddingTop = 0;
    el.style.paddingBottom = 0;
  },

  enter(el) {
    el.dataset.oldOverflow = el.style.overflow;
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight   "px";
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    } else {
      el.style.height = "";
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    }

    el.style.overflow = "hidden";
  },

  "after-enter"(el) {
    el.style.transition = "";
    el.style.height = "";
    el.style.overflow = el.dataset.oldOverflow;
  },

  "before-leave"(el) {
    if (!el.dataset) el.dataset = {};
    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;
    el.dataset.oldOverflow = el.style.overflow;

    el.style.height = el.scrollHeight   "px";
    el.style.overflow = "hidden";
  },

  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition;
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
    }
  },

  "after-leave"(el) {
    el.style.transition = "";
    el.style.height = "";
    el.style.overflow = el.dataset.oldOverflow;
    el.style.paddingTop = el.dataset.oldPaddingTop;
    el.style.paddingBottom = el.dataset.oldPaddingBottom;
  },
};

export default {
  name: "collapseTransition",
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition,
    };
    return h("transition", data, children);
  },
};

vue 页面使用：

<template>
  <div>
    <div style="background: #ccc">
      <div>名称</div>
      <collapse-transition>
        <div class="collapse-wrap" v-show="isActive">
          <slot>
            <div>这里是不固定高度内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
          </slot>
        </div>
      </collapse-transition>
      <div @click="isActive = !isActive">收起</div>
    </div>
  </div>
</template>

<script>
import collapseTransition from "./transition";
export default {
  name: "eventDetail",
  components: {
    collapseTransition,
  },
  data() {
    return {
      isActive: true,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

参考：https://segmentfault.com/q/1010000011359250

四、高度不固定，展开收起，动画

不固定高度，内容展开收起、添加动画：
参考1：vuejs如何实现这样的展开收起动画？：https://segmentfault.com/q/1010000011359250【可用】
参考2：https://blog.csdn.net/qq_41337100/article/details/106744236
参考2：vue 展开收起（高度不固定，还要有平滑的过渡效果）：https://blog.csdn.net/fengxiaopeng74/article/details/113652342
参考3：纯css实现高度不固定的下拉文本框的展开/收起的动画效果：https://juejin.cn/post/6895655249479270413 【可用】
参考4：css做 “展开收起” 功能，借鉴大佬思路：https://juejin.cn/post/7007632958622269471

问题：https://segmentfault.com/q/1010000019945164/
参考5：https://www.cnblogs.com/coco1s/p/14270671.html
参考6：高度无缝动画： https://blog.csdn.net/shi851051279/article/details/91666530

这篇好文章是转载于：学新通技术网