我正在努力实现以下效果,从底部开始为整个div动画文本div。当可以获取transformY的高度时,可以使用javascript进行此操作。有没有办法用纯CSS做到这一点?
(注意,transformY当前已进行硬编码以用于展示)。
$('.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>
答案 0 :(得分:1)
使用top:100%
最初隐藏文本,因为top内的百分比值考虑了容器的高度。然后使用transformY(-100%)
进行显示,因为变换内部的百分比考虑了变换后元素的高度:
/*$('.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>