分享
三行代码  ›  专栏  ›  技术社区  ›  Smokey Dawson

从底部而不是顶部开始高度动画

  •  0
  • Smokey Dawson  · 技术社区  · 10 月前

    就像标题说的,我想从底部而不是顶部开始高度动画??我知道这个问题被问过几次,比如 here 但它没有回答我的问题,并且使用了jquery,我不想这样做。

    我创建了一个简单的 sliding box

    我的代码如下

    HTML

    <div class="container">
      <div class="box">
    
      </div>
    </div>
    
    <button onclick="addClass()">
      click me
    </button>
    

    CSS

    .container{
      height: 400px;
      width: 200px;
      border: 2px solid black;
    }
    
    .box{
      height: 0;
      overflow: hidden;
      background: black;
      transition: 0.4s;
      transform-origin: bottom;
    } 
    
    .box.show{
      height: 400px;
    }
    

    JavaScript

    function addClass() {
        const box = document.querySelector('.box');
        box.classList.toggle('show');
    }
    

    我期望的结果是让盒子从底部而不是顶部向上滑动。

    2 回复  |  直到 10 月前
        1
  •  1
  •   Blue    10 月前

    这有帮助吗?

    function addClass() {
    	const box = document.querySelector('.box');
      box.classList.toggle('show');
    }
        .container{
          height: 400px;
          width: 200px;
          border: 2px solid black;
          overflow: hidden;
        }
    
        .box{
          height: 100%;
          position: relative;
          top: 100%;
          background: black;
          transition: top 0.4s;
        }
    
        .box.show{
          top: 0;
        }
    <div class="container">
      <div class="box">
        
      </div>
    </div>
    
    <button onclick="addClass()">
      click me
    </button>
        2
  •  1
  •   Ashton Hauser    10 月前

    如果您的目标是在页面底部开始动画,只需使用

    position: absolute; bottom: 0px;

    对于初始样式,这会使DIV或元素的位置变为x:0 y:0,设置 bottom: 0px 将其推到您可以放置的最高Y值,强制页面底部。