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

Question

我有一个响应式网站，它根据视口大小从外部样式表 responsive.css 加载不同的一些 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;到您想要动画的任何元素来实现您想要的效果。这基本上会在 1 秒内为该特定元素的 css 属性的任何变化设置动画。

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

Answer 3

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

调整他们的页面大小，看看会发生什么。