使用JQuery动画CSS响应式样式表

Question

我有一个自适应网站，可以从外部样式表中加载不同的CSS，response.css，具体取决于视口大小。

当所需的视口更改时，这些新的CSS规则会被加载并且网页会相应地进行调整，但我希望这个转换能够进行动画处理。而不是一切只是抢购到位。例如，平板电脑肖像和平板电脑的风格略有不同，因此这里的动画效果非常令人愉快。

基本上，有一种简单的方法可以说.animate('resonsive.css');或者我只是因为那种简单而妄想吗？如果是这样，有人可以向我解释如何去做这件事吗？

谢谢：）

Answer 1

您是否有理由将样式拆分为不同的样式表？

最好将所有样式包含在一个样式表中，并简单地将那些针对不同屏幕尺寸的样式与

分开

@media  (min-width: XXXem) and (max-width: XXXem) {
    Put your styles in here.
} 

然后，您可以将CSS过渡应用于要设置动画的元素：

elements to animate {
-webkit-transition:all .2s ease-in;  
-moz-transition:all .2s ease-in;  
-o-transition:all .2s ease-in;  
transition:all .2s ease-in;
}

这是一支笔作为例子： http://cdpn.io/cwbuf

请阅读此处了解有关过渡的更多信息： http://css3.bradshawenterprises.com/transitions/

Answer 2

不幸的是，没有简单的1行解决方案。

您可以通过向要设置动画的任何元素添加transition: all 1s ease-in;或transition: 1s ease-in;之类的内容来达到所需效果。这基本上会使该特定元素的css属性的任何变化超过1秒。

阅读http://www.impressivewebs.com/css3-transition-all/了解更多信息。

Answer 3

您可以使用jquery http://masonry.desandro.com/插件。

调整页面大小以查看会发生什么。