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