diff --git a/CHANGELOG.md b/CHANGELOG.md index ddc4f9d3..1b349d6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -245,7 +245,7 @@ ### Breaking -- [Experimental transition] Adopt the latest spec of [View Transitions](https://www.w3.org/TR/css-view-transitions-1/) that is available in Chrome 109 and later ([#447](https://github.com/marp-team/marp-cli/issues/447), [#483](https://github.com/marp-team/marp-cli/issues/483), [#489](https://github.com/marp-team/marp-cli/pull/489)) +- [Experimental transition] Adopt the latest spec of [View Transition](https://www.w3.org/TR/css-view-transitions-1/) that is available in Chrome 109 and later ([#447](https://github.com/marp-team/marp-cli/issues/447), [#483](https://github.com/marp-team/marp-cli/issues/483), [#489](https://github.com/marp-team/marp-cli/pull/489)) ### Changed diff --git a/README.md b/README.md index afd920da..e9aa7640 100644 --- a/README.md +++ b/README.md @@ -375,10 +375,10 @@ The `bespoke` template is using [Bespoke.js](https://github.com/bespokejs/bespok - **Fragmented list**: Recognize [Marpit's fragmented list](https://github.com/marp-team/marpit/issues/145) and appear list one-by-one if used `*` and `1)` as the bullet marker. - **Presenter view**: Open presenter view in external window by hitting p key. (It may become disabled when not fulfilled requirements for working) - **Progress bar** (optional): By setting `--bespoke.progress` option, you can add a progress bar on the top of the deck. -- [**Slide transitions**][transitions]: Support transitions (`transition` local directive) powered by [View Transitions API]. +- [**Slide transitions**][transitions]: Support transitions (`transition` local directive) powered by [View Transition API]. [transitions]: ./docs/bespoke-transitions/README.md -[view transitions api]: https://www.w3.org/TR/css-view-transitions-1/ +[view transition api]: https://www.w3.org/TR/css-view-transitions-1/ #### Docs @@ -647,7 +647,7 @@ If you want to prevent looking up a configuration file, you can pass `--no-confi | `bespoke` | object | | Setting options for `bespoke` template | | ┗ `osc` | boolean | `--bespoke.osc` | \[Bespoke\] Use on-screen controller (`true` by default) | | ┗ `progress` | boolean | `--bespoke.progress` | \[Bespoke\] Use progress bar (`false` by default) | -| ┗ `transition` | boolean | `--bespoke.transition` | \[Bespoke\] Use [transitions] (Only in browsers supported [View Transitions API]: `true` by default) | +| ┗ `transition` | boolean | `--bespoke.transition` | \[Bespoke\] Use [transitions] (Only in browsers supported [View Transition API]: `true` by default) | | `browser` | string \| string[] | `--browser` | The kind of browser for conversion (`auto` by default) | | `browserPath` | string | `--browser-path` | Path to the browser executable | | `browserProtocol` | `cdp` \| `webdriver-bidi` | `--browser-protocol` | Set the preferred protocol for connecting to the browser (`cdp` by default) | diff --git a/docs/bespoke-transitions/README.md b/docs/bespoke-transitions/README.md index 46c0fae9..58fc02a9 100644 --- a/docs/bespoke-transitions/README.md +++ b/docs/bespoke-transitions/README.md @@ -10,18 +10,18 @@ Marp CLI's `bespoke` HTML template supports **slide transition animations**, tha ## Prerequisite -The slide transition depends on **[View Transitions] API** in the using browser. _We does never lock in to a specific JavaScript library_, as same as other Marp ecosystem projects :) +The slide transition depends on **[View Transition] API** in the using browser. _We does never lock in to a specific JavaScript library_, as same as other Marp ecosystem projects :) -To show transition animations, a viewer has to show HTML slide in the browser which have supported View Transitions. +To show transition animations, a viewer has to show HTML slide in the browser which have supported View Transition. -[view transitions]: https://www.w3.org/TR/css-view-transitions-1/ +[view transition]: https://www.w3.org/TR/css-view-transitions-1/ ### Supported browsers - **Chrome**: ✅ (111-) - **Edge**: ✅ (111-) +- **Safari**: ✅ (18.2- / [#572](https://github.com/marp-team/marp-cli/issues/572)) - **Firefox**: :x: -- **Safari**: Testable in [Safari Technology Preview 192](https://webkit.org/blog/15260/release-notes-for-safari-technology-preview-192/) and later ## `transition` local directive @@ -491,7 +491,7 @@ If you want to swap the order of layers during animation, try to animate `z-inde ## Morphing animations -View Transitions API also provides smooth moving animation during the transition, for specific two elements before and after the transition. It gives a very similar effect to PowerPoint's Morph transition and Keynote's Magic Move, just by simple CSS declarations. +View Transition API also provides smooth moving animation during the transition, for specific two elements before and after the transition. It gives a very similar effect to PowerPoint's Morph transition and Keynote's Magic Move, just by simple CSS declarations. If there were marked elements with the same name by [`view-transition-name` CSS property][view-transition-name] in a old page and new page between transition, the `bespoke` template will apply morphing animation automatically. diff --git a/src/marp-cli.ts b/src/marp-cli.ts index b278d955..4f080841 100644 --- a/src/marp-cli.ts +++ b/src/marp-cli.ts @@ -290,7 +290,7 @@ export const marpCli = async ( }, 'bespoke.transition': { describe: - '[Bespoke] Use transitions (Only in browsers supported View Transitions API)', + '[Bespoke] Use transitions (Only in browsers supported View Transition API)', defaultDescription: 'true', group: OptionGroup.Template, type: 'boolean', diff --git a/src/templates/bespoke/bespoke.scss b/src/templates/bespoke/bespoke.scss index 090d3f4a..a18651a9 100644 --- a/src/templates/bespoke/bespoke.scss +++ b/src/templates/bespoke/bespoke.scss @@ -68,7 +68,7 @@ $progress-height: 5px; @media (prefers-reduced-motion: reduce) { * { - /* Disable view transitions declared by users */ + /* Disable view transition declared by users */ view-transition-name: none !important; } } @@ -109,7 +109,7 @@ $progress-height: 5px; /* Hack for Chrome to show OSC overlay onto video correctly */ will-change: transform; - /* View Transitions */ + /* View Transition */ view-transition-name: __bespoke_marp_transition_osc__; > * {