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

时间:2019-07-01 18:54:27

标签: html css css-transitions

我试图在激活时从下到上进行模态转换,我对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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您可以使用两个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>