Impress.js 的 CSS 是如何工作的？答案

【问题标题】：How does Impress.js's CSS work?Impress.js 的 CSS 是如何工作的？
【发布时间】：2013-03-30 20:20:11
【问题描述】：

我正在阅读有关 Impress.js 的信息，并且对下面的代码有一些疑问（Inpress 演示的一部分）。

.impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

我的问题：

.impress-enabled 类在这里有什么用？
那么类 .active 是否应用于当前显示的步骤？因此，它的不透明度在显示时变为 1，在显示下一个时变为 0.3；如上面的.impress-enabled .step 中所述，对吧？

感谢您的帮助

【问题讨论】：

标签： css impress.js

【解决方案1】：

如果访问者浏览器禁用了 javascript，他将根本无法获得启用 .impress 的类，因为它是通过 javascript 添加的。这就是他们可以分离 javascript 和非 javascript 版本的方式（只需停用 javascript 片刻，然后再次访问 impress.js 的示例页面）。因此，如果您激活了 js，“无聊”类会被移除，而名为“impress-on-bored”和“impress-enabled”的类会被激活。
是的。你是对的。

【讨论】：

那么当浏览器支持 Impress 时，类 impress-not-supported 被移除，impress-enabled, impress-on-idhere 被添加到 body 元素中？两个类都添加了吗？二等舱有什么用？
我不太清楚，但我希望如下：impress-on-bored 在范围内找到 impress 时添加（但尚未应用，例如它的“嘿……我是准备好了..只要激活我”）impress-enabled如果通过 js 在 document.ready 函数中应用 impress 将被添加
impress-on-ID 可用于在幻灯片激活时添加特定于幻灯片的 js 或 css 代码。例如，如果您的幻灯片很小，并且浏览器窗口中包含多张幻灯片，我们最初可以隐藏除第一张幻灯片以外的所有幻灯片。一旦特定幻灯片变为活动状态，它将获得 impress-on-ID 类。我们可以使用这个类来使步骤可见。如果您想了解更多信息，请阅读我关于使用 impress.js 构建令人印象深刻的演示文稿的书packtpub.com/building-impressive-presentations-with-impressjs/…

【解决方案2】：

impress-on-ID 可用于在激活时添加特定于幻灯片的 js 或 css 代码。例如，如果您的幻灯片很小并且浏览器窗口中包含多张幻灯片，我们可以先隐藏除第一张幻灯片以外的所有幻灯片。

一旦特定幻灯片变为活动状态，它将获得 impress-on-ID 类。我们可以使用这个类来使步骤可见。

如果你想了解更多，请阅读我在Building Impressive Presentations with impress.js上的书

【讨论】：