我试图实现以下,动画文本div从底部到它的完整高度。当我能得到transformY的高度时,我可以用javascript做到这一点。有没有办法用纯css做到这一点?
(请注意,transformY当前针对showcase进行了硬编码)。
$('.trigger').click(function() {
$('.inner').css({"transform": "translateY(73px)"});
});
.wrap {
position: absolute;
width: 200px;
height: 100px;
top: 50px;
left: 0;
overflow: hidden;
background-color: #333;
color: #FFF;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 5px;
color: #fff;
font-size: 15px;
background: rgba(0,0,0,0.5);
box-sizing: border-box;
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: ease-out;
transform: translate(0, 100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="trigger">
show it
</button>
<div class="wrap">
<div class="inner">Lorem ipsum dolor</div>
</div>
发布于 2018-10-31 06:42:10
使用top:100%
最初隐藏文本,因为顶部的百分比值考虑了容器的高度。然后使用transformY(-100%)
来显示它,因为percentage inside transform考虑了转换后元素的高度:
/*$('.trigger').click(function() {
$('.inner').css({
"transform": "translateY(-100%)"
});
});*/
.wrap {
width: 200px;
height: 100px;
margin:10px;
overflow: hidden;
background-color: #333;
color: #FFF;
position:relative;
}
.inner {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 5px;
color: #fff;
font-size: 15px;
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
transition: transform 0.2s ease-out;
}
.wrap:hover .inner{
transform:translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="trigger">
show it
</button>
<div class="wrap">
<div class="inner">Lorem ipsum dolor<br>Lorem ipsum dolor</div>
</div>
<div class="wrap">
<div class="inner">Lorem ipsum dolor</div>
</div>
https://stackoverflow.com/questions/53073884
复制相似问题