transition缓动画pop层展开收起元素(无固定高度)多种写法对比CSS

橙子yq

已于 2022-07-29 10:37:05 修改

阅读量1.6k

点赞数

分类专栏：组件样式文章标签： html css 前端

于 2022-07-29 10:33:50 首次发布

本文链接：https://blog.csdn.net/m0_49031950/article/details/126039804

版权

本文介绍了在元素高度不确定的情况下，如何使用CSS实现过渡动画以平滑地展开和收起内容。文章通过对比三种不同的实现方式，包括Y轴压缩、顶部位移和最终选用的方式，探讨了在不同场景下的适用性。最终选用的方案解决了无固定高度元素的缓动效果，并针对出现的问题进行了调整，确保了元素中溢出样式的正常显示。

摘要由CSDN通过智能技术生成

近期收到样式优化需求, 需要实现的效果如下:

原本的展示隐藏比较突兀, 体验没那么好, 现在给页面展开和收起加上动画效果

通常, 如果在内容元素有固定高度的情况下, 很容易实现, 代码大致为这样:

基础版:

.box{
            width: 300px;
            height:20px;
            background-color: pink;
            transition: transform 0.5s ease;
        }

这里hover可以改为点击事件触发js操作DOM
  box:hover {
     height:400px;
  }

但我项目的使用场景都是没有给元素加固定高度, 由内容撑开高度的, 于是上面的基础版缓动效果, 改为了height:0和height:auto之后, 缓动效果是不生效的...于是有了以下几个版本的尝试↓

方式一

Y轴压缩方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            background-color: pink;
            transform: scaleY(0);    
            transform-origin: top;
            transition: transform 0.5s ease;
        }
        p:hover ~ .box {
          transform: scaleY(1);
        }
        .box>div {
            height: 40px;
        }
    </style>
</head>
<script src="./lib/vue.js"><