在不兼容的浏览器上禁用CSS3动画？
[英]Disable CSS3 animations on incompatible browsers?
问题描述
I have a fade-in animation on the main container on page load. 
页面加载时，我在主容器上有一个淡入动画。
It works fine with all browsers expect IE(9). 可以在所有期望IE（9）的浏览器上正常工作。
Is there a way to detect if the user is using a browser incompatible with CSS3 animations and so disable them, so they can view the page? 有没有一种方法可以检测用户是否正在使用与CSS3动画不兼容的浏览器，然后禁用它们，以便他们可以查看页面？
HTML 的HTML
<body>
<span id="splash-title">
<img src="kuntosali/images/fc_yrityskeskus.png" class="pure-img" id="splash-logo" alt="logo" />
<img src="kuntosali/images/loading.gif" id="loading" alt="loading" />
</span>
<div class="splash-container">
<div class="splash">
<span class="splash-head"></span>
<p class="splash-subhead">
<span>FoxCenter</span> on kuntosali ja yrityskeskus.<br>
Kumpaa etsit?
</p>
<p>
<a href="yrityskeskus/" class="pure-button pure-button-primary">Yrityskeskus</a>
<a href="kuntosali/" class="pure-button pure-button-primary">Kuntosali
</a>
</p>
</div>
</div>
</body>
CSS 的CSS
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
opacity: 0;
-webkit-animation: fade-in 2s forwards 4s;
-moz-animation: fade-in 2s forwards 4s;
-o-animation: fade-in 2s forwards 4s;
animation: fade-in 2s forwards 4s;
}
4 个解决方案
解决方案1
1 2014-10-27 13:04:58
As pointed by @Karl-AndréGagnon, using modernizr might be the cleanest way to go. 正如@Karl-AndréGagnon所指出的那样，使用modernizr可能是最干净的方法。 It will then add a no-cssanimations class to the <html> tag when a browser cannot use CSS3 animations. 当浏览器无法使用CSS3动画时， no-cssanimations在<html>标记中添加no-cssanimations类。
You can then use it to add "non-CSS3-animation support CSS or javascript": 然后，您可以使用它添加“非CSS3动画支持CSS或javascript”：
- in CSS you will do
.no-cssanimations .splash { /* ...do something */ }在CSS中，您将执行.no-cssanimations .splash { /* ...do something */ } - in javascript you can do : 在javascript中，您可以执行以下操作：
if( Modernizr.cssanimations ){ /* ...do something */ }
if( $(".no-cssanimations").length ){ /* ...do something */ }
Resources 资源资源
- http://modernizr.com/ http://modernizr.com/
- Modernizr development version: http://modernizr.com/downloads/modernizr-latest.js Modernizr开发版本： http : //modernizr.com/downloads/modernizr-latest.js
- Modernizr custom builds (for prod): http://modernizr.com/download/ Modernizr自定义版本（适用于产品）： http : //modernizr.com/download/
解决方案2
1 2014-10-27 13:05:14
You should look into Modernizr which is a feature detection library. 您应该查看Modernizr ，它是一个功能检测库。
If you go to the download page, choose features you want to detect and then add the script to your site. 如果转到下载页面，请选择要检测的功能，然后将脚本添加到您的站点。
This will give you access to the Modernizr object in javascript and also add classes to the HTML tag (if that option is selected). 这将使您可以访问javascript中的Modernizr对象，还可以将类添加到HTML标记（如果选择了该选项）。
In CSS: 在CSS中：
.cssanimations .splash {
// Styles for when CSS animations work
}
Or in Javascript: 或使用Javascript：
if( Modernizr.cssanimations ){
// Javascript if CSS animations work
}
Hope that helps :) 希望有帮助:)
解决方案3
0 2014-10-27 13:06:03
If CSS 3 is not supported, animation is ignored and so already disabled. 如果不支持CSS 3，动画将被忽略，因此已被禁用。
For a proper detect of animation property in JS, no need: 为了正确检测JS中的动画属性，不需要：
if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
// not supported
}
You can maybe load jquery, jquery lite or zepto for old browser and do this: 您可以为旧的浏览器加载jquery，jquery lite或zepto并执行以下操作：
if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
$('.splash').fadeIn();
}
PS: this trick: bottom: 0; right: 0; PS：这个技巧： bottom: 0; right: 0; bottom: 0; right: 0; will probably fail on some browsers. 在某些浏览器上可能会失败。
解决方案4
0 2014-10-28 19:10:43
Not to be completely antiquated here, but here's how I'd do it if I didn't want to use Modernizr. 这里不要完全过时，但是如果我不想使用Modernizr，这就是我要做的。
There are probably a ton of different ways to do this but... 可能有很多不同的方法可以做到这一点，但是...
If I were trying to target a specific version of IE (regardless of CSS3), I would just use IE conditional comments. 如果我要针对特定版本的IE（无论CSS3如何）定位目标，我只会使用IE条件注释。
For example: 例如：
Style the fade-in div with display:none; 使用display：none设置淡入div的样式。 in the linked conditional commented CSS Stylesheet (ie.css or whatever you wish to name it). 在附带条件的带注释的CSS样式表中（例如，css或任何您想要命名的样式）。
That fade-in div would appear in all browsers except the specific IE browsers that you targeted with the conditional comments just by using a tiny bit of CSS. 该渐入式div会出现在所有浏览器中，除了您仅需使用少量CSS即可使用条件注释定位的特定IE浏览器。 Simple solution and very lightweight. 简单的解决方案，非常轻巧。
See more about conditional comments here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ 在此处查看有关条件注释的更多信息： http : //css-tricks.com/how-to-create-an-ie-only-stylesheet/
Also, if you wanted to know more about what CSS3 can be used on specific browsers check out http://caniuse.com/ 另外，如果您想进一步了解特定浏览器可以使用哪些CSS3，请访问http://caniuse.com/。
It clearly defines what you can and cannot use for specific browsers (not just IE). 它清楚地定义了您可以和不能用于特定浏览器（不仅限于IE）的功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.