<div id="a">my content blah blah .....</div>
<div id="b" style="display: none">magic content blah blah</div>
<div id="c">other stuff</div>
在js(jQuery)中,我使用
$("#b").fadeIn()
和$("#b").fadeOut()
来控制div#b的可见性当jQuery Animation开始/结束时,最后一个div(div#c)(由浏览器)向上移动(在div#a下)(在fadeOut上)和向下移动(在div#b下)(在fadeIn上)
如何为div#c的移动设置动画? (使用div过渡平稳地上下移动div(#c))。
“移动”是指当某项消失(淡出)或屏幕的“分辨率”发生变化(自适应调整)时,浏览器执行的元素重新定位
谢谢。
最佳答案
在使用fadeIn()
和fadeOut()
时,您正在将元素从display: whatever
更改为display: none;
,反之亦然。使用显示方法,任何DOM元素上都没有过渡属性-因此,最好切换到CSS3过渡,而不是https://www.w3schools.com/css/css3_transitions.asp,这是过渡属性(例如opacity
,visibility
和max-height
s)的混合!否则,您可以考虑使用JS库,例如GSAP-https://greensock.com/gsap
关于javascript - CSS过渡-动画响应式重新定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46527294/