Impress.js的CSS如何运作?

时间:2013-03-30 20:20:12

标签: css impress.js

我正在阅读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 }

我的问题:

  1. 这里有什么.impress-enabled类?

  2. 所以class .active应用于当前显示的步骤?因此,它的不透明度在显示时变为1,在显示下一个时变为.3。如上面的.impress-enabled .step中描述的那样,对吗?

  3. 感谢您的帮助

2 个答案:

答案 0 :(得分:2)

  1. 如果访问者浏览器停用了javascript,他将无法获得启用.impress的类,因为它是通过javascript添加的。这就是他们如何分离javascript和非javascript版本(暂时停用javascript并再次访问impress.js的示例页面)。因此,如果您激活了js,则会删除“无聊”类,并且会激活一个名为“impress-on-bored”和“impress-enabled”的类。
  2. 是。你是对的。

答案 1 :(得分:0)

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

一旦特定幻灯片变为活动状态,它将获得铭刻入住的ID类。我们可以使用这个类使步骤可见。

如果您想了解更多信息,请阅读Building Impressive Presentations with impress.js

上的图书