javascript - css transitions - 动画响应重新定位

Question

<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 动画开始/结束时，最后一个 div (div#c) 被(通过浏览器)向上移动(在 div#a 下)(在淡出时)和向下(在 div#b 下)(在淡入时)

如何为 div#c 的移动设置动画？ (平滑地上下移动 div(#c))与 css 转换。

“移动”是指当元素消失(淡出)或屏幕的“分辨率”发生变化(响应式适应)时浏览器执行的元素重新定位谢谢。

Answer 1

当您使用 fadeIn() 和 fadeOut() 时，您正在将元素从 display: whatever 更改为 display: none;，反之亦然。使用 display 方法的任何 DOM 元素都没有过渡属性 - 所以你最好改用 CSS3 过渡 https://www.w3schools.com/css/css3_transitions.asp , opacity、visibility 和 max-height 等过渡属性的混合体!否则，您可以考虑使用 JS 库，例如 GSAP - https://greensock.com/gsap