Question

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

if (Modernizer.cssanimation)

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

非常感谢

Answer 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;
}

并使用cssanimations类覆盖样式以显示css动画：

.cssanimations #flash {
    display: none;
}
.cssanimations #css {
    display: initial;
}

See this demo并使用IE8或更低版本以及Chrome等兼容浏览器进行测试。 IE显示“这是Flash动画”，而Chrome显示“这是CSS动画”。

当然，这只适用于启用JavaScript的情况。使用禁用的JavaScript，您甚至可以在现代浏览器中看到Flash动画。

使用现代化器，我怎样才能为css3动画提供后备，重新回到闪存？

1 个答案: