<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,这是过渡属性(例如opacityvisibilitymax-height s)的混合!否则,您可以考虑使用JS库,例如GSAP-https://greensock.com/gsap

关于javascript - CSS过渡-动画响应式重新定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46527294/

10-11 23:28
查看更多