Question

我试图在激活时从下到上进行模态转换，我对transform-origin: bottom没有运气，做了一个示例代码笔

HTML

<div class="main"> 

  <div class="hidden">HOVER</div>
</div>

css

.main{
  height: 500px;
  width: 500px;
  background: blue;

}
.hidden{
 height: 0px;
  width: 300px;
  background-color: red;
  transform-origin: bottom;
  top: 100%;
  -webkit-transition: 1s;

}
.hidden:hover{
  height:200px;
  -webkit-transition:height 1s;
}

https://codepen.io/danielkmx/pen/OevOLW

Answer 1

这应该对您有用，但这可能会闪烁一下。

const separateWords = str => str.replace(/[A-Z]/g, '\n$&');

Answer 2

您可以使用两个DIV的相对/绝对位置组合（父相对，子绝对）并根据相对于父级bottom的位置设置来做到这一点：

.main {
  height: 500px;
  width: 500px;
  background: blue;
  position: relative;
}

.hidden {
  height: 16px;
  width: 300px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: red;
  transition: 1s;
}

.hidden:hover {
  height: 200px;
}

<div class="main">
  <div class="hidden">HOVER</div>
</div>

从底部开始，从高度0到100的过渡元素

2 个答案: