Question

就像标题说的那样，我希望能够从底部而不是顶部开始高度动画？我知道这个问题已经像here这样问了几次，但它无法回答我的问题，并且使用了我不想做的jQuery。

我创建了一个sliding box

的简单jsFiddle

我的代码如下

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');
}

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

Answer 1

有帮助吗？

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>

Answer 2

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

position: absolute; bottom: 0px;

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

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

2 个答案: