Update transition experiment for bespoke template (second iteration)

[yhatt]

This is the second iteration of the transition experiment #382.

• Follow up a new spec of Shared Element Transition API
• Update tests
• Update Transitions for bespoke template #447
• Write an article about custom transitions (later)

• Remaining tasks
  • Fix backward transition when navigation is triggered by from presenter view
  • Allow navigation in presenter view while transition in the main view

Summary

• Brand-new 33 built-in transitions: Marp CLI provides a bunch of built-in transition effects for ready to apply to the presentation.

• Custom transitions!: In a new transition experiment, you can set custom transition effect just by defining a few ruled animation keyframes in CSS. (Markdown inline styles / theme CSS)

• Update of transition local directive

marp-transition-showcase.mov

Available built-in transitions

• clockwise
• counterclockwise
• cover
• coverflow
• cube
• cylinder
• diamond
• drop
• explode
• fade
• fade-out
• fall
• flip
• glow
• implode
• in-out
• iris-in
• iris-out
• melt
• overlap
• pivot
• pull
• push
• reveal
• rotate
• slide
• star
• swap
• swipe
• swoosh
• wipe
• wiper
• zoom

none is a reserved name to disable transition. Other every transitions are able to override by defining custom transition in CSS.

Update of transition local directive

A change of target to assign transition

In the first iteration, transition local directive had assigned an animation when the target slide was gone. This behavior was a bit confusable, so we have improved transition directive assigns the animation for "the next boundary between slides".

For example, previously an animation had triggered when navigating page in the pattern of "2p -> 3p" and "2p -> 1p" if set a transition pattern to the second slide. And now it will trigger when "2p -> 3p" and "3p -> 2p" navigation. We believe this behavior is easier to understand than previous.

By this change, there is no actual meanings to set transition directive to the last slide.

Simplified interface

We always have to think about simplicity. In this iteration, YAML object support to customize transition details (#425) has been reverted.

Especially a custom transition delay has less use in real. I wonder if there is meaning to make delay to a navigate action by the viewer.

The custom duration of transition still can set through a space-separated parameter. (transition: fade 1s).

Known problems

• Don't forget this is cutting edge of Chrome currently. You might meet not working transition or crashed tab.
• Currently a local-scoped keyframes by <style scoped> cannot use as transition keyframes.

Specifications

• Currently animation for transition is targeting to whole of the view that includes slide letterbox / pillarbox.
• An updated transition support is respecting prefers-reduced-motion media query, for viewers whose opt out of visual overloading. If detected preferring reduced motion, all kind of transitions (including custom transitions) become to force consistent animation fade.
• Proposed CSS pseudo-elements by Shared Element Transitions API can not use in the context of Marp theme and Markdown inline style. So you cannot modify the style for containers that are wrapped transition animations.

[yhatt]

The second iteration of transition experiment is ready to ship 🚀