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

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Windyluna

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值