Question

所以从这个问题Transition effects Top vs. Bottom in CSS is not working我无法进行自上而下的过渡，那么我将如何尝试获得这样的效果（但是有过渡）

＆＃13;

function show_box()
{
    let box = document.getElementById("box")
    box.className += " show";
}

＆＃13;

.box {
  background-color: red;
  top: 100%;
  transition: 1s;
  position: fixed;
}

.box.show {
  top: initial;
  bottom: 0;
}

＆＃13;

<div id="box" class="box">
  sdome box with some large text
  <br/>
  <br/>
  <br/>
  <br/>
  sdfasdfsdf
</div>
<button onclick="show_box()">Show</button>

＆＃13;

Answer 1

function show_box()
{
    let box = document.getElementById("box")
    box.className += " show";
}

.box {
  height: 0px;
  width: 300px;
  background-color: red;
  top: 100%;
  -webkit-transition: 1s;
  position: fixed;
}

.box.show {
  top: initial;
  bottom: 0;
  height:200px;
  -webkit-transition:height 1s;
}

<div id="box" class="box">

</div>
<button onclick="show_box()">Show</button>

Answer 2

＆＃13;

function showBox(boxId)
{
    let box = document.getElementById(boxId)
    box.className += " show";
}

＆＃13;

.box {
  background: #cdf; 
  width: 200px;
  height: 200px;
  position: fixed;
  overflow: hidden;
}

.box#box-2 {
  left: 220px;
}
.box#box-3 {
  left: 430px;
}

.box > .inner {
  width: 100%;
  position: absolute;
  top: 100%;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

.box.show > .inner {
  top: 0;
  transition: top 2s ease;
}

.box > .inner > .subInner {
  position: relative;
  width: 100%;
  align-self: flex-end;
  background: #f00;
}

＆＃13;

<div class="box" id="box-1">
  <button onClick="showBox('box-1')">Show</button>
  <div class="inner">
    <div class="subInner">
      <p>Some content in box-1</p>
    </div>
  </div>
</div>


<div class="box" id="box-2">
  <button onClick="showBox('box-2')">Show</button>
  <div class="inner">
    <div class="subInner">
      <p>Content of box-2 with different height</p>
      <p>Content of box-2</p>
      <p>Content of box-2 again</p>
    </div>
  </div>
</div>

<div class="box" id="box-3">
  <button onClick="showBox('box-3')">Show</button>
  <div class="inner">
    <div class="subInner">
      <p>Third box content</p>
      <p>Third box content again</p>
    </div>
  </div>
</div>

＆＃13;

我在这里添加了小提琴作为片段。

<强>更新我改变了从css悬停到js-button点击事件的行为，我担心我不再有任何想法，因为盒子的固定位置对可能的解决方案做了相当严格的限制，这取决于你的任务的具体条件

css从顶部100％过渡到底部0

2 个答案: