CSS从div的高度开始从底部开始制作动画
CSS从div的高度开始从底部开始制作动画
提问于 2018-10-31 06:39:14
我试图实现以下，动画文本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>
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53073884
复制相关文章
相似问题
腾讯云开发者
