Reveal.js: data-transition="none" isn't none.

Created on 15 Jun 2015  路  6Comments  路  Source: hakimel/reveal.js

The none slide transition no longer is none. Given you have the following slides:

                <section>
                    <section data-transition="none">
                        <h1>Stuff</h1>
                    </section>
                    <section data-transition="none">
                        <h1>Stuff</h1>
                    </section>
                    <section data-transition="none">
                        <h1>Stuff</h1>
                    </section>
                    <section data-transition="none">
                        <h1>Stuff</h1>
                    </section>
                </section>

Even given the data-transition being none the text will appear to "pulse" as it fades out and then fades back in again. Typically, I've used this pattern with images, progressively revealing the image content on consecutive slides with a new image in each slide. (Example: http://socketwench.github.io/exampleModuleAintCore/#/6/8)

The behavior was not present in earlier versions of Reveal.js.

bug

Most helpful comment

@Huxpro, until it is fixed, you can add the following to reveal.scss meantime:

section {
    &[data-transition*="none-out"] {
        &.present, &.past {
            transition-duration: 0s !important;
        }
    }
    &[data-transition*="none-in"] {
    &.future, &.present {
        transition-duration: 0s !important;
    }
    }
}

All 6 comments

I'm not sure if it's intentional but you've nested your slides within a containing section tag so there'll be arranged vertically. I've found that you'll get the desired transition behaviour if you remove the outermost section tags - so move between slides with left/right cursor keys.

Also, you shouldn't have to declare the data-transition attribute on every slide just set transition in your configuration options. However, you can override this global behaviour by setting the data-transition attribute on a slide by slide bassi.

That's really only a workaround. None _does_ seem to be none between left and right slide transitions. This is a change on behavior from earlier versions of Reveal, though. I shouldn't need to throw out all multi-level slides just because of this regression...

This bug should be fixed in reveal.js v3.2.0.

Confirmed, fixed in 3.2.0. Thanks!

@socketwench Have you ever wrote following code?

<section data-transition="slide-in none-out">
  <h1>Stuff</h1>
</section>
<!--  or <section data-transition="none-in none-out">  -->
<section data-transition="none">
  <h1>Stuff</h1>
</section>
<section data-transition="none-in slide-out">
  <h1>Stuff</h1>
</section>

This approach provide even better transitions and controll between every slide.
But sadly It won't work yet.

@Huxpro, until it is fixed, you can add the following to reveal.scss meantime:

section {
    &[data-transition*="none-out"] {
        &.present, &.past {
            transition-duration: 0s !important;
        }
    }
    &[data-transition*="none-in"] {
    &.future, &.present {
        transition-duration: 0s !important;
    }
    }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Enosinger picture Enosinger  路  4Comments

nielsnuebel picture nielsnuebel  路  3Comments

draptik picture draptik  路  3Comments

togakangaroo picture togakangaroo  路  4Comments

berteh picture berteh  路  5Comments