Merge pull request #222 from marp-team/restart-animation-when-switchi…

…ng-page

Restart CSS animations when switching page in bespoke template

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixed
 
 - Add a trailing slash to the directory links on server index page to avoid broken path resolution ([#221](https://github.com/marp-team/marp-cli/pull/221) by [@n-ari](https://github.com/n-ari))
+- Restart CSS animations when switching page in bespoke template ([#222](https://github.com/marp-team/marp-cli/pull/222))
 
 ### Changed
 

src/templates/bespoke/bespoke.scss

@@ -31,6 +31,13 @@ $progressHeight: 5px;
       opacity: 1;
       pointer-events: auto;
       z-index: 0;
+
+      &.bespoke-marp-active-ready {
+        * {
+          /* Reset animation: "none" keyword does not reset animation in Firefox */
+          animation-name: __bespoke_marp__ !important;
+        }
+      }
     }
 
     &[data-bespoke-marp-load='hideable'] {

src/templates/bespoke/classes.ts

@@ -5,9 +5,19 @@ export default function bespokeClasses(deck) {
   deck.slides.map((element) => element.classList.add('bespoke-marp-slide'))
 
   deck.on('activate', (e) => {
-    deck.slides.map((element) =>
-      element.classList.remove('bespoke-marp-active')
+    const shouldResetAnimation = !e.slide.classList.contains(
+      'bespoke-marp-active'
     )
+
+    deck.slides.map((element) => {
+      element.classList.remove('bespoke-marp-active')
+    })
     e.slide.classList.add('bespoke-marp-active')
+
+    if (shouldResetAnimation) {
+      e.slide.classList.add('bespoke-marp-active-ready')
+      void document.body.clientHeight
+      e.slide.classList.remove('bespoke-marp-active-ready')
+    }
   })
 }

src/templates/bespoke/presenter/next-view.ts

@@ -6,12 +6,16 @@ export default function nextView(deck) {
     const [dir, args] = e.data.split(':')
 
     if (dir === 'navigate') {
-      const [idx, fragIdx] = args.split(',')
+      const [sIdx, sFragIdx] = args.split(',')
+      let idx = Number.parseInt(sIdx, 10)
+      let fragment = Number.parseInt(sFragIdx, 10) + 1
 
-      deck.slide(Number.parseInt(idx, 10), {
-        fragment: Number.parseInt(fragIdx, 10),
-      })
-      deck.next()
+      if (fragment >= deck.fragments[idx].length) {
+        idx += 1
+        fragment = 0
+      }
+
+      deck.slide(idx, { fragment })
     }
   }