让我们将我们在 CSS-Tricks 上学到的三件事结合起来
第一，过渡到自动尺寸。第二，使用现代方法 使用 Ajax 加载内容。第三，等待图像加载 并对其进行测量。
有了这三个工具，我们可以使用 Ajax 加载任意内容，并将其插入页面，并使用过渡动画来显示其高度。很酷吧！
以下是最终的演示
查看 Pen 滑动显示 Ajax 内容 由 Chris Coyier (@chriscoyier) 发布在 CodePen 上。
想法是，由于我们无论如何都要使用 JavaScript，因为我们要使用 Ajax 加载内容，我们不妨继续使用 JavaScript 来帮助我们创建一个平滑的过渡。
按照 “编写脚本” 的传统，以下是我们编写的脚本
- 使用 Ajax 加载内容
- 创建一个虚拟元素，其宽度与您计划注入内容的位置完全相同
- 将您的内容注入虚拟元素
- 测量虚拟元素（仔细测量）
- 将您的内容注入真正的（且已折叠）元素
- 将高度过渡到测量的值
- 清理自己
所有代码都在 演示 中逐行注释。
这太棒了！我现在可能病得太重了，不能评论，但粗略地看了一下，这是否适合使用 FLIP 技术，因为您已经收集了高度数据？ https://aerotwist.com/blog/flip-your-animations/
只是一个想法。很棒的文章！简洁实用。
在 Javascript 中的第 23 行，您需要添加一个 'px' 后缀，以便实际设置宽度
testerElement.style.width = adZone.offsetWidth + 'px';否则，高度计算结果会过大。如果您正在为
max-height设置动画，这并不是什么大问题，但值得注意。您可以使用自定义属性（如果可能），并将动画保留在 css 中。
以下是您示例的快速 技巧。
如果演示对您不起作用，请尝试关闭您的广告拦截器。
它必须在代码中看到关键字“ad”，并将其视为合法的广告。
这种技术本身是合理的，但我只是想说，我觉得这是当今网络上最烦人的做法。
我喜欢阅读内容。我接受了广告是帮助我获取内容的协议。开发人员似乎正在寻找让阅读变得更难的方法。不要移动我正在阅读的内容。
我滚动到可以阅读下一段的位置，然后您需要等待几秒钟才能在后台加载一些广告，然后您移动我正在阅读的内容。我忘记了我在哪里。
我四处看了看，找到了我之前的位置。往下读一行或两行，砰的一声，您删除了广告并再次移动我正在阅读的内容。
我无法想象有人在我阅读时不停地上下移动我的报纸，因为他们想让我看点东西，我还能保持冷静。