我是 modernizer 的新手,不明白如何在不支持 css 动画的情况下隐藏我的 css 动画并显示 flash 副本。我明白我用
if (Modernizer.cssanimation)
但是不明白if语句中需要什么样的代码结构。
非常感谢
最佳答案
您不需要在 JavaScript 中执行此操作。您可以使用您的 CSS 代码。 Modernizr 将 css 类添加到 <html/>
标记以显示是否支持某个功能。对于动画,它是 cssanimations
. modernizr 完成工作后,Firefox 20 中的 HTML 标记看起来像
<html class=" js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
假设您有一个容器,里面有一个 flash 对象:
<div id="container">
<div id="flash">Here is the Flash animation</div><!-- <object .../> -->
<div id="css">Here is the CSS animation</div>
</div>
然后你可以使用默认样式来为不支持 css 动画的浏览器显示 flash 电影
#css {
display: none;
}
并覆盖样式以显示 css 动画,而不是使用 cssanimations
类:
.cssanimations #flash {
display: none;
}
.cssanimations #css {
display: initial;
}
See this demo并使用 IE8 或更低版本以及兼容的浏览器(如 Chrome)进行测试。 IE 显示“这是 Flash 动画”,而 Chrome 显示“这是 CSS 动画”。
当然,这只有在启用 JavaScript 时才有效。在禁用 JavaScript 的情况下,您甚至可以在现代浏览器中看到 Flash 动画。
关于css - 使用 modernizer,我怎样才能为 css3 动画提供回退,回退到 flash?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16138424/