CSS过渡或动画从顶部:100%滑到底部:0: [英] CSS transition or animate slide up from top:100% to bottom:0
本文介绍了CSS过渡或动画从顶部:100%滑到底部:0:的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
内部div的高度可变,取决于内部文本的长度,该长度总是比外部div短.我希望当外部div悬停时,内部叠加层div从top:100%滑到bottom:0:我下面的CSS代码无法产生我想要的向上滑动效果.它只是在外部div的底部弹出内部div.
The inner div has a variable height depends on the length of the text inside, which is always shorter than the outer div. I'd like the inner overlay div to slide up from top:100% to bottom:0 when the outer div is hovered. My CSS code below does not produce the slide up effect I want. It simply pops up the inner div at the bottom of the outer div.
<div class="outer">
<div class="inner">This is a content block.</div>
</div>
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; top:100%; bottom:auto;
transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
top:auto; bottom:0;
}
推荐答案
您的代码无法正常工作,因为从/向 auto
的过渡不起作用.
your code cannot work because transition doesn't work from/to auto
.
默认情况下,您可以设置bottom:0并使用transfom,例如
you could set bottom:0 by default and play with transfom, e.g.
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; bottom:0;
transform: translateY(100%);
transition: transform 300ms;
}
.outer:hover .inner {
transform: translateY(0);
}
这篇关于CSS过渡或动画从顶部:100%滑到底部:0:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文