• 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>列1div>
          <div>列2div>
          <div>列3div>
          <div>列4div>
          <div>列5div>
          <div>列6div>
          <div>列7div>
          <div>列8div>
          <div>列9div>
          <div>列10div>
          <div>列11div>
          <div>列12div>
          <div>列13div>
        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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    二、效果二：

    在这里插入图片描述

    <template>
  <div>
    <div>这是名称名称名称div>
    <div class="box" :class="{ expandBox: !isExpand }">
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
      <div>12121212121div>
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    三、效果三：高度不固定

    封装过渡效果的 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);
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    参考：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

  • 相关阅读:
    如何创建前端绘图和图表？
    虚拟机配置网络（主机ping、虚拟机ping不通等问题）
    Java Stream流的使用
    聚观早报｜小米14渲染图曝光；蚂蚁金融大模型正式发布
    刷题之Leetcode27题(超级详细)
    pytorch-geometric相关包安装链接
    基于 Python 的地理空间绘图（附源码）
    VS2017+Qt5.12使用问题笔记
    【OpenCV】-算子（Sobel、Canny、Laplacian）学习
    tensor的不同维度种类
  • 原文地址：https://blog.csdn.net/Windyluna/article/details/126049382