只有在动画之后才能使用CSS隐藏/移除div所带的空格(Hide / remove space taken by div from html with css only after animation)
我试图“物理”删除,或让div(例如)在隐藏后不占用屏幕上的空间。
我在#test div下面添加了另一个div,以显示在#test被隐藏后,它仍占用屏幕上的空间。 有没有办法让这个空间消失,只有CSS?
#test { opacity: 0; -webkit-animation: fadeinout 3s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadeinout 3s; /* Firefox < 16 */ -ms-animation: fadeinout 3s; /* Internet Explorer */ -o-animation: fadeinout 3s; /* Opera < 12.1 */ animation: fadeinout 3s; } @keyframes fadeinout { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeinout { /* Firefox */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeinout { /* Safari and Chrome */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeinout { /* Opera */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }<div id="test">hide me after 3 seconds</div> <div>After 3 seconds I don't move up.</div>I'm trying to "physically" remove, or have the div (for example) not take up space on the screen after hidden.
I added another div below the #test div to show that after #test is hidden, it still takes up space on the screen. Is there a way to have that space be gone, with css only?
#test { opacity: 0; -webkit-animation: fadeinout 3s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadeinout 3s; /* Firefox < 16 */ -ms-animation: fadeinout 3s; /* Internet Explorer */ -o-animation: fadeinout 3s; /* Opera < 12.1 */ animation: fadeinout 3s; } @keyframes fadeinout { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeinout { /* Firefox */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeinout { /* Safari and Chrome */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeinout { /* Opera */ from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }<div id="test">hide me after 3 seconds</div> <div>After 3 seconds I don't move up.</div>最满意答案
你也可以动画最大高度 - 只要确保中间的最大高度比最高的衰落div高
#test { opacity: 0; -webkit-animation: fadeinout 3s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadeinout 3s; /* Firefox < 16 */ -ms-animation: fadeinout 3s; /* Internet Explorer */ -o-animation: fadeinout 3s; /* Opera < 12.1 */ animation: fadeinout 3s; max-height: 0; } @keyframes fadeinout { from { max-height: 0; opacity: 0; } 50% { opacity: 1; max-height: 5em; } to { opacity: 0; max-height: 0; } }<div id="test">hide me after 3 seconds</div> <div>After 3 seconds I don't move up.</div>You could also animate the max-height - just make sure that the middle max-height is taller than your tallest fading div
#test { opacity: 0; -webkit-animation: fadeinout 3s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadeinout 3s; /* Firefox < 16 */ -ms-animation: fadeinout 3s; /* Internet Explorer */ -o-animation: fadeinout 3s; /* Opera < 12.1 */ animation: fadeinout 3s; max-height: 0; } @keyframes fadeinout { from { max-height: 0; opacity: 0; } 50% { opacity: 1; max-height: 5em; } to { opacity: 0; max-height: 0; } }<div id="test">hide me after 3 seconds</div> <div>After 3 seconds I don't move up.</div>
更多推荐
发布评论