Fragment fade-[direction] styles don't work on `p/span`

[reagle]

As you can see in this slide fragment styles fade-up, fade-down, fade-left, fade-right do not work when used on a span within a p. All fragment styles do, and p/span is the structure used by pandoc.

[cderv]

Possibly related: https://github.com/hakimel/reveal.js/issues/2126#issuecomment-468982264 and https://github.com/hakimel/reveal.js/pull/2338

Are translate function in transform() applicable to a span ? I don't think transform applies to spans https://www.w3.org/TR/css-transforms-1/#transformable-element

From : https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Warning: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

And this is what is used for the effect - so for span supporting the effect would require probably another way https://github.com/hakimel/reveal.js/blob/a9277f9d465a07cc3b2baa3a2c4fbc152afd7f14/css/reveal.scss#L122-L136

[reagle]

Thanks @cderv, I suspect your diagnosis is correct. For revealjs, is this likely a WONT FIX? In any case, I'll open an issue to see if pandoc could move the attribute from the span to the p element.

[cderv]

Interesting. Did you test setting them to <p> works ?

I am not sure though that is a solution. You could have several span in one <p>

pandoc -t revealjs
[A document]{.fragment .highlight-red} [is a list of block elements]{.fragment .fade-up} [that contain
inline elements or other blocks.]{.fragment}
^Z
<section class="slide level6">

<p><span class="fragment highlight-red">A document</span> <span
class="fragment fade-up">is a list of block elements</span> <span
class="fragment">that contain inline elements or other
blocks.</span></p>
</section>

See Nested Fragment in revealjs https://revealjs.com/fragments/#nested-fragments

In this case, you can't move the class on the one <p>