响应式设计之间的过渡效应

时间:2014-11-26 13:47:09

标签: javascript jquery animation responsive-design

我试图模仿特定类型的响应功能,我发现很难专门研究我想要的东西。

基本上它是一种响应式设计形式,其中如果调整窗口大小,则会有轻微的暂停,然后整个站点布局平滑地动画以正确地适合新窗口或设备大小。

你可以看到我在这里谈论的一个例子:http://www.briannathanhartwell.com/

我通常使用媒体查询并通过断点工作。我能看到这个工作的唯一方法是通过一些全局JavaScript函数,触发窗口调整大小然后导致一大堆JavaScript动画。那会准确吗?

2 个答案:

答案 0 :(得分:1)

可以通过使用css3过渡属性轻松完成,如:

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

您只需在媒体查询条件中应用它们。

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

注意:IE9不支持CSS3 Transitions样式。

答案 1 :(得分:1)

即使我在你的例子中没有看到太多动画,我也想回答你的问题。

您可以设置eventListener,根据大小调整页面大小和重新排列。在eventListener中,您可以获得某些布局的某些断点。

一种更优雅的方式就是操纵css,这取决于媒体查询并使用转换来更改为相应的值。

font-size: 200px;
transition: color 12s, font-size 12s;

这里有一个小例子:(不要善于在小提琴中查看,将其粘贴到本地IDE中)。 http://jsfiddle.net/jcyacdmv/ 欢呼声,