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

我有一个响应式网站，它根据视口大小从外部样式表responsive.css加载不同的一些CSS。使用JQuery动画CSS响应式样式表

当所需的视口改变这些新的CSS规则得到加载和网页相应的调整，但我希望这种变换是动画。而不是一切就绪。例如，平板电脑肖像和平板电脑风景的风格略有不同，因此这里的动画效果会非常令人愉快。

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

谢谢:)

2013-07-19 UzumakiDev

是否有原因将样式分成不同的样式表？

更好的将包括一个样式表中所有的风格和简单地隔离那些针对不同屏幕尺寸与

@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/

来源

2013-07-19 10:05:15 robooneus

啊，是的，我已经做到了这一点，因为这是我的第一个敏感网站，保持分开会阻止我感到困惑。一旦我准备好部署，我会这样做。谢谢你的领导:) – UzumakiDev

啊，好的。我添加了一支笔来演示......只需打开它并调整大小即可看到div响应。请记住，这是渐进式增强：即只能在支持CSS转换的浏览器中使用。虽然（更快），但比使用jQuery好得多。 – robooneus

甜，我保持优雅退化的东西，我在实施一些花里胡哨的阶段，很高兴知道它可以在css3中完成，因为我试图使JavaScript网站尽可能准确，关闭。感谢您的建议，您现在得到一个绿色的勾号。：d – UzumakiDev

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

您可以通过将任何类似transition: all 1s ease-in;或transition: 1s ease-in;的内容添加到您想要制作动画的任何元素来达到所需的效果。这基本上会动画超过1秒的特定元素的CSS属性的任何变化。

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

来源

2013-07-19 10:03:23 boz

啊哈！这是我正在寻找的那种建议，所有这些都是在CSS3中完成的？完美，这是我正在寻找的方向，谢谢。在这里，有一个绿色的勾号。：D – UzumakiDev

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

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

来源

2013-07-19 10:04:43 Sbml

是的，我听说过砌体插件，但我希望自己做一些事情。谢谢你的提示。 – UzumakiDev

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

回答

相关问题