javascript - 响应式设计之间的过渡效果

Question

我正在尝试模仿特定类型的响应功能，但我发现很难专门研究我想要的功能。

基本上，它是一种响应式设计形式，其中如果调整窗口大小，则会稍有停顿，然后整个站点布局会平滑地进行动画处理，以正确适应新窗口或设备大小。

您可以在这里看到我正在谈论的示例:http://www.briannathanhartwell.com/

我通常使用媒体查询并通过断点进行工作。我能看到这个工作的唯一方法是通过一些全局 JavaScript 函数，该函数在窗口大小调整时触发，然后引发一大堆 JavaScript 动画。这样说准确吗？

Answer 1

这可以通过使用 css3 过渡属性轻松实现，例如:

http://www.w3schools.com/css/css3_transitions.asp

您只需将它们应用于您的媒体查询条件。

请看一下这个例子: http://css-tricks.com/animated-media-queries/

注意:IE9 不支持 CSS3 过渡样式。