css 过渡 - 动画响应重新定位答案

【问题标题】：css transitions - animate responsive repositioningcss 过渡 - 动画响应重新定位
【发布时间】：2017-10-02 22:21:03
【问题描述】：

<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 下）（在 fadeOut 上）和向下（在 div#b 下）（在 fadeIn 上）

如何为 div#c 的这些动作设置动画？（通过 css 过渡平滑地上下移动 div(#c)）。

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

【问题讨论】：

标签： javascript jquery css animation css-transitions

【解决方案1】：

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

【讨论】：