0

我是modernizer的新手，如果不支持css动画并显示flash副本，我不明白如何隐藏我的css动画。我明白我用

if (Modernizer.cssanimation)

但不明白 if 语句中需要什么代码结构。

非常感谢

4

1 回答 1

-1

您不需要在 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;
}

请参阅此演示并使用 IE8 或更低版本以及 Chrome 等兼容浏览器对其进行测试。IE 显示“这是 Flash 动画”，而 Chrome 显示“这是 CSS 动画”。

当然，这仅在启用 JavaScript 时才有效。使用禁用的 JavaScript，即使在现代浏览器中，您也会看到 Flash 动画。

于 2013-04-22T02:38:03.043 回答