css - How does Impress.js's CSS work?

Question

I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo).

.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 }

My questions:

1. What is .impress-enabled class here for?

2. So class .active is applied on the step currently displayed? And thus, its opacity changes to 1 when its displayed and back to .3 when its next one is displayed; as described in .impress-enabled .step above it, right?

Thanks for help

Answer 1

1. if javascript is deactivated by the visitors browser, he won't get a .impress-enabled class at all, because it is added via javascript. that's how they could separate a javascript and a non-javascript version (simply deactivate javascript for a moment and visit an example page of impress.js again). So if you have js activated, the class "bored" gets removed and a class called "impress-on-bored" and "impress-enabled" gets activated.
2. Yes. You're right.

Answer 2

impress-on-ID can be used to add slide specific js or css code when it becomes active. For example, if your slides are small and multiple slides are contained in the browser window, we can initially hide all the slides other than first slide.

Once specific slide becomes active, it will get impress-on-ID class. We can use this class to make the step visible.

If you want to know more, read my book on Building Impressive Presentations with impress.js