不定高度动态元素transition过渡动画

最新推荐文章于 2024-02-15 18:18:05 发布

jaqi.l

最新推荐文章于 2024-02-15 18:18:05 发布

阅读量447

点赞数

分类专栏： tips 文章标签：动画 javascript css

本文链接：https://blog.csdn.net/ljq547152849/article/details/125702905

版权

max-height 动画效果交互设计 JavaScript CSS

关键词由CSDN通过智能技术生成

tips 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

通过max-height实现，仅提供一种思路

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      background-color: pink;
      transition: max-height ease-in-out 0.5s;
      line-height: 20px;
      padding: 10px;
    }

    .btn {
      color: red;
      cursor: pointer;
      user-select: none;
    }

    span {
      display: inline-block;
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
    <span>文字文字文字文字文字文字文字文字文</span> <span class="btn">按钮</span>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
  </div>
  <script>
    // 获取展开按钮距离顶部位置
    var maxHeight = document.querySelector(".btn").offsetTop
    // 初始化盒子的最大高度
    document.querySelector(".box").style.maxHeight = maxHeight + 10 + 'px'
    // 点击事件 展开或收起
    document.querySelector('.btn').onclick = () => {
      if (document.querySelector(".box").style.maxHeight === '100vh') {
        document.querySelector(".box").style.maxHeight = maxHeight + 10 + 'px'
      } else {
        document.querySelector(".box").style.maxHeight = '100vh'
      }

    }

  </script>
</body>

</html>