Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-transition on vertical sections #1947

Open
schwiet opened this issue Jul 24, 2017 · 8 comments
Open

data-transition on vertical sections #1947

schwiet opened this issue Jul 24, 2017 · 8 comments

Comments

@schwiet
Copy link

schwiet commented Jul 24, 2017

<section>
  <section data-transition="zoom"></section>
  <section data-transition="fade"></section>
</section>

Using data-transition on a nested section seems to have no affect; it always does a slide/fade up. Is this by design? Am I doing something wrong?

@jrondorf
Copy link

Does not work for me either.

@reagle
Copy link

reagle commented Sep 26, 2018

Can you confirm it is working on unnested versions? Any date-transition beside none, slide, and fade are currently not working for me.

@reagle
Copy link

reagle commented Sep 27, 2018

In issue #2237 I documented that my horizontal slide/sections don't work, as well, because pandoc wraps all top level sections -- except the title-slide -- in a superfluous <section> element. So that unnecessary behavior triggers #1947 for all my slides.

The issue here, then, is why does @data-transition not work on //section/section as originally asked?

jgm added a commit to jgm/pandoc that referenced this issue Sep 28, 2018
Previously revealjs title slides at level (slidelevel - 1)
were nested under an extra section element, even when
the section contained no additional (vertical) content.
That caused problems for some transition effects.
See hakimel/reveal.js#1947.
@deisi
Copy link

deisi commented Nov 7, 2018

I have the same problem. Is this fixed by now somewhere?

@hakimel
Copy link
Owner

hakimel commented Nov 8, 2018

I ran some tests and–as @reagle already mentioned–data-transition on vertical slides works for the none, slide and fade transitions.

The concave and convex transition styles were being applied to the slide but there was an issue that prevented 3D transforms from working on vertical slides, so they ended up looking like the 2D slide transition. I've fixed that in b6ce0a9.

The zoom transition setting applies a scaling transform to horizontal slides, but has always used a flat slide transition between vertical slides. Not sure how to best address that when the setting is used directly on a specific vertical slide yet but will think about it.

@reagle
Copy link

reagle commented Nov 8, 2018

Thank you, I pulled dev and can confirm concave and convex work on google-chrome 70.0.3538.77. 👍Looking forward to whatever you come up with for zoom!

@nathanchere
Copy link

nathanchere commented Dec 24, 2020

The workaround which solves this for me is to put the same transition on each of the child sections, e.g.:

<section>
    <section data-transition="fade">
        <h2>Here comes a video</h2>
    </section>
    <section data-transition="fade" data-background-video="./video.mp4">
        <h2>Here comes a video</h2>
    </section>
</section>

If I put it on the parent section or only one of the child sections it doesn't do anything.

@cderv
Copy link

cderv commented Sep 17, 2021

Curious if this has been fixed ?

It seems that it is working now :

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>reveal.js - Slide Transitions</title>
    <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reveal.css">
    <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/black.css" id="theme">
	</head>

	<body>
		<div class="reveal">
			<div class="slides">
        <section>Horizontal Slide</section>
				<section>
				  <section>Main slide</section>
				  <section data-transition="zoom">data-transition: zoom</section>
				</section>
			</div>
		</div>

		<script src="https://unpkg.com/reveal.js@^4//dist/reveal.js"></script>
		<script>
			Reveal.initialize({
				center: true,
				history: true,
			});
		</script>
	</body>
</html>

Or am I missing something ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants