From c3b1494b4ce27779105cf7d558fc9754e2193ca5 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Tue, 4 May 2021 11:37:21 -0400 Subject: [PATCH 01/13] added animation options --- css/amp-story-player-iframe.css | 4 + examples/amp-story/player.html | 92 +++++++++++++++---- src/amp-story-player/amp-story-player-impl.js | 42 +++++++-- 3 files changed, 111 insertions(+), 27 deletions(-) diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css index c314c56b4eb8..a7b595dc3adb 100644 --- a/css/amp-story-player-iframe.css +++ b/css/amp-story-player-iframe.css @@ -42,6 +42,10 @@ transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } +.i-amphtml-story-player-loaded.i-amphtml-story-player-no-navigation-transition iframe { + transition: none; +} + .i-amphtml-story-player-main-container iframe:nth-of-type(1), .i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="0"] { transform: translate3d(0, 0, 1px); diff --git a/examples/amp-story/player.html b/examples/amp-story/player.html index d401ff093ca7..4156dd626306 100644 --- a/examples/amp-story/player.html +++ b/examples/amp-story/player.html @@ -32,31 +32,85 @@ line-height: 1.25; text-shadow: 3px 3px #000; } + .actions .circle { + width: 65px; + height: 65px; + background-size: cover; + overflow: hidden; + border-radius: 50%; + display: inline-block; + margin: 10px; + box-shadow: + 0 0 0 3px white, + 0 0 0 7px hsl(20, 79%, 60%); + color: white; + text-align: center; + padding-top: 20px; + box-sizing: border-box; + text-shadow: 0px 2px 4px #000000; + } + + .actions .circle.active { + box-shadow: + 0 0 0 3px white, + 0 0 0 7px hsl(257, 79%, 60%); + } +

This is a NON-AMP page that embeds a story below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.
- - - - A local’s guide to what to eat and do in New York City - - - - A local’s guide to what to eat and do in Miami - - - - A local’s guide to what to eat and do in Mexico City - - - - A local’s guide to what to eat and do in Rome - - +
+ + + + A local’s guide to what to eat and do in New York City + + + + A local’s guide to what to eat and do in Miami + + + + A local’s guide to what to eat and do in Mexico City + + + + A local’s guide to what to eat and do in Rome + + +
+
New York
+
Miami
+
Mexico City
+
Rome
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.
diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 071ed5c03a0f..b092171a0d85 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -115,6 +115,10 @@ const STORY_MESSAGE_STATE_TYPE = { /** @const {string} */ export const AMP_STORY_PLAYER_EVENT = 'AMP_STORY_PLAYER_EVENT'; +/** @const {string} */ +const CLASS_NO_NAVIGATION_TRANSITION = + 'i-amphtml-story-player-no-navigation-transition'; + /** @typedef {{ state:string, value:(boolean|string) }} */ let DocumentStateTypeDef; @@ -135,17 +139,28 @@ let StoryDef; /** * @typedef {{ - * on: string, - * action: string, - * endpoint: string, + * on: ?string, + * action: ?string, + * endpoint: ?string, + * pageScroll: ?boolean, + * autoplay: ?boolean, + * programmaticNavigationAnimation: ?boolean, * }} */ let BehaviorDef; /** * @typedef {{ - * controls: (!Array), - * behavior: !BehaviorDef, + * attribution: ?string, + * }} + */ +let DisplayDef; + +/** + * @typedef {{ + * controls: ?Array, + * behavior: ?BehaviorDef, + * display: ?DisplayDef, * }} */ let ConfigDef; @@ -756,15 +771,23 @@ export class AmpStoryPlayer { * Shows the story provided by the URL in the player and go to the page if provided. * @param {?string} storyUrl * @param {string=} pageId + * @param {{animate: boolean?}} options * @return {!Promise} */ - show(storyUrl, pageId = null) { + show(storyUrl, pageId = null, options = {}) { const story = this.getStoryFromUrl_(storyUrl); let renderPromise = Promise.resolve(); if (story.idx !== this.currentIdx_) { this.currentIdx_ = story.idx; + if (options.animate != undefined) { + this.rootEl_.classList.toggle( + CLASS_NO_NAVIGATION_TRANSITION, + !options.animate + ); + } + renderPromise = this.render_(); this.onNavigation_(); } @@ -945,8 +968,9 @@ export class AmpStoryPlayer { * Navigates stories given a number. * @param {number} storyDelta * @param {number=} pageDelta + * @param {{animate: boolean?}} options */ - go(storyDelta, pageDelta = 0) { + go(storyDelta, pageDelta = 0, options = {}) { if (storyDelta === 0 && pageDelta === 0) { return; } @@ -969,7 +993,7 @@ export class AmpStoryPlayer { let showPromise = Promise.resolve(); if (this.currentIdx_ !== newStory.idx) { - showPromise = this.show(newStory.href); + showPromise = this.show(newStory.href, null, options); } showPromise.then(() => { @@ -1546,6 +1570,8 @@ export class AmpStoryPlayer { this.pageScroller_ && this.pageScroller_.onTouchStart(event.timeStamp, coordinates.clientY); + this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION); + this.element_.dispatchEvent( createCustomEvent( this.win_, From b597f79b4b72aee9969a30c3cb600ef74cef7249 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Tue, 4 May 2021 12:03:25 -0400 Subject: [PATCH 02/13] Removed animation from behaviordef --- src/amp-story-player/amp-story-player-impl.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index b092171a0d85..29a6712eac3b 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -144,7 +144,6 @@ let StoryDef; * endpoint: ?string, * pageScroll: ?boolean, * autoplay: ?boolean, - * programmaticNavigationAnimation: ?boolean, * }} */ let BehaviorDef; From 971c227d1904d50b91786f935bd947a5ad115be6 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Wed, 5 May 2021 11:10:23 -0400 Subject: [PATCH 03/13] Added newline on player --- examples/amp-story/player.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/amp-story/player.html b/examples/amp-story/player.html index 4156dd626306..ab52155d7f2d 100644 --- a/examples/amp-story/player.html +++ b/examples/amp-story/player.html @@ -96,6 +96,7 @@

This is a NON-AMP page that embeds a story below:

A local’s guide to what to eat and do in Rome +
Date: Wed, 5 May 2021 11:32:31 -0400 Subject: [PATCH 04/13] Added documentation on options --- spec/amp-story-player.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/spec/amp-story-player.md b/spec/amp-story-player.md index 3815a16a65ec..e0b1d979a536 100644 --- a/spec/amp-story-player.md +++ b/spec/amp-story-player.md @@ -182,6 +182,7 @@ playerEl.load(); - number: the story in the player to which you want to move, relative to the current story. - number (optional): the page of the story to which you want to move, relative to the current page. +- {animate: boolean} (optional): options for the navigation (animate: whether to animate the story transition). If the player is currently on the third story out of five stories: @@ -189,6 +190,7 @@ If the player is currently on the third story out of five stories: - `player.go(-1)` will go backward one story to the second story - `player.go(-1, 1)` will go backward one story and navigate one page backwards - `player.go(0, 5)` will stay in the current story and navigate 5 pages forward +- `player.go(1, 0, {animate: false})` will go to the next page without the swipe animation #### show @@ -196,6 +198,7 @@ If the player is currently on the third story out of five stories: - string or null: the URL of the story to show. - string (optional): the ID attribute of the page element. +- {animate: boolean} (optional): options for the navigation (animate: whether to animate the story transition). Will change the current story being displayed by the player. @@ -203,6 +206,7 @@ Will change the current story being displayed by the player. player.show('cool-story.html'); // Will display cool-story.html player.show('cool-story.html', 'page-4'); // Will display cool-story.html and switch to page-4 player.show(null, 'page-4'); // Stay on current story and switch to page-4 +player.show('cool-story.html', null, {animate: false}); // Will display cool-story.html without the swipe animation ``` #### rewind From b4289263b5e10f0aa1eebdfaa5646be2b2cb17d7 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Wed, 5 May 2021 14:44:58 -0400 Subject: [PATCH 05/13] Use next to toggle animation --- examples/amp-story/player.html | 1 + src/amp-story-player/amp-story-player-impl.js | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/examples/amp-story/player.html b/examples/amp-story/player.html index ab52155d7f2d..ca36e5d51ed8 100644 --- a/examples/amp-story/player.html +++ b/examples/amp-story/player.html @@ -48,6 +48,7 @@ padding-top: 20px; box-sizing: border-box; text-shadow: 0px 2px 4px #000000; + cursor: pointer; } .actions .circle.active { diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 29a6712eac3b..1f7e841027a4 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -780,7 +780,7 @@ export class AmpStoryPlayer { if (story.idx !== this.currentIdx_) { this.currentIdx_ = story.idx; - if (options.animate != undefined) { + if (options?.animate != undefined) { this.rootEl_.classList.toggle( CLASS_NO_NAVIGATION_TRANSITION, !options.animate @@ -927,7 +927,7 @@ export class AmpStoryPlayer { this.isCircularWrappingEnabled_ && this.isIndexOutofBounds_(this.currentIdx_ + 1) ) { - this.go(1); + this.go(1, 0, {animate: true}); return; } @@ -1569,8 +1569,6 @@ export class AmpStoryPlayer { this.pageScroller_ && this.pageScroller_.onTouchStart(event.timeStamp, coordinates.clientY); - this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION); - this.element_.dispatchEvent( createCustomEvent( this.win_, From d0e8f66ca219d8caa5ac6c01cec00cd4d1027a4a Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Thu, 6 May 2021 11:52:13 -0400 Subject: [PATCH 06/13] Use transitionend --- css/amp-story-player-iframe.css | 2 +- src/amp-story-player/amp-story-player-impl.js | 26 ++++++++++++------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css index a7b595dc3adb..632ea90efb1e 100644 --- a/css/amp-story-player-iframe.css +++ b/css/amp-story-player-iframe.css @@ -43,7 +43,7 @@ } .i-amphtml-story-player-loaded.i-amphtml-story-player-no-navigation-transition iframe { - transition: none; + transition-duration: 0.01s; /* Set to low value so transitionend is emitted */ } .i-amphtml-story-player-main-container iframe:nth-of-type(1), diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 1f7e841027a4..dd96d63ff9f1 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -31,7 +31,7 @@ import { serializeQueryString, } from '../url'; import {applySandbox} from '../3p-frame'; -import {createCustomEvent} from '../event-helper'; +import {createCustomEvent, listenOnce} from '../event-helper'; import {dict} from '../core/types/object'; import {isJsonScriptTag, tryFocus} from '../dom'; // Source for this constant is css/amp-story-player-iframe.css @@ -780,14 +780,17 @@ export class AmpStoryPlayer { if (story.idx !== this.currentIdx_) { this.currentIdx_ = story.idx; + renderPromise = this.render_(); + if (options?.animate != undefined) { this.rootEl_.classList.toggle( CLASS_NO_NAVIGATION_TRANSITION, !options.animate ); + listenOnce(story.iframe, 'transitionend', () => { + this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION); + }); } - - renderPromise = this.render_(); this.onNavigation_(); } @@ -927,7 +930,7 @@ export class AmpStoryPlayer { this.isCircularWrappingEnabled_ && this.isIndexOutofBounds_(this.currentIdx_ + 1) ) { - this.go(1, 0, {animate: true}); + this.go(1); return; } @@ -1003,6 +1006,7 @@ export class AmpStoryPlayer { /** * Updates story position. * @param {!StoryDef} story + * @return {!Promise} * @private */ updatePosition_(story) { @@ -1013,10 +1017,13 @@ export class AmpStoryPlayer { ? StoryPosition.NEXT : StoryPosition.PREVIOUS; - requestAnimationFrame(() => { - const {iframe} = story; - resetStyles(iframe, ['transform', 'transition']); - iframe.setAttribute('i-amphtml-iframe-position', position); + return new Promise((resolve) => { + requestAnimationFrame(() => { + const {iframe} = story; + resetStyles(iframe, ['transform', 'transition']); + iframe.setAttribute('i-amphtml-iframe-position', position); + resolve(); + }); }); } @@ -1105,11 +1112,10 @@ export class AmpStoryPlayer { }) // 5. Finally update the story position. .then(() => { - this.updatePosition_(story); - if (story.distance === 0) { tryFocus(story.iframe); } + return this.updatePosition_(story); }) .catch((err) => { if (err.includes(LOG_TYPE.DEV)) { From 8a1a96a44a61fd033a7ef932b58fe365c70c0818 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Thu, 6 May 2021 11:56:24 -0400 Subject: [PATCH 07/13] Using classes for CSS --- css/amp-story-player-iframe.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css index 632ea90efb1e..183d25ac05a3 100644 --- a/css/amp-story-player-iframe.css +++ b/css/amp-story-player-iframe.css @@ -37,12 +37,12 @@ transform-style: preserve-3d; } -.i-amphtml-story-player-loaded iframe { +.i-amphtml-story-player-loaded .story-player-iframe { opacity: 1; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } -.i-amphtml-story-player-loaded.i-amphtml-story-player-no-navigation-transition iframe { +.i-amphtml-story-player-no-navigation-transition .story-player-iframe { transition-duration: 0.01s; /* Set to low value so transitionend is emitted */ } From 0b2852fc38b6c7cb57bc52b74c893cdfd58091fa Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Thu, 6 May 2021 12:02:21 -0400 Subject: [PATCH 08/13] Reverted requestAnimationFrame promise --- src/amp-story-player/amp-story-player-impl.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index dd96d63ff9f1..f744ea307d94 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -1017,13 +1017,10 @@ export class AmpStoryPlayer { ? StoryPosition.NEXT : StoryPosition.PREVIOUS; - return new Promise((resolve) => { - requestAnimationFrame(() => { - const {iframe} = story; - resetStyles(iframe, ['transform', 'transition']); - iframe.setAttribute('i-amphtml-iframe-position', position); - resolve(); - }); + requestAnimationFrame(() => { + const {iframe} = story; + resetStyles(iframe, ['transform', 'transition']); + iframe.setAttribute('i-amphtml-iframe-position', position); }); } @@ -1112,10 +1109,11 @@ export class AmpStoryPlayer { }) // 5. Finally update the story position. .then(() => { + this.updatePosition_(story); + if (story.distance === 0) { tryFocus(story.iframe); } - return this.updatePosition_(story); }) .catch((err) => { if (err.includes(LOG_TYPE.DEV)) { From 155fabd3c92eb42f26485b788dce66317789c736 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Thu, 6 May 2021 17:24:07 -0400 Subject: [PATCH 09/13] Added tests --- test/unit/test-amp-story-player.js | 67 ++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/test/unit/test-amp-story-player.js b/test/unit/test-amp-story-player.js index a9a8cbc48a0d..5e65455fdc20 100644 --- a/test/unit/test-amp-story-player.js +++ b/test/unit/test-amp-story-player.js @@ -18,6 +18,7 @@ import {AmpStoryComponentManager} from '../../src/amp-story-player/amp-story-com import {AmpStoryPlayer} from '../../src/amp-story-player/amp-story-player-impl'; import {Messaging} from '@ampproject/viewer-messaging'; import {PageScroller} from '../../src/amp-story-player/page-scroller'; +import {expect} from 'chai'; describes.realWin('AmpStoryPlayer', {amp: false}, (env) => { let win; @@ -1440,5 +1441,71 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => { }, }); }); + + it('supress navigation animation if called go with options.animate = false', async () => { + const playerEl = win.document.createElement('amp-story-player'); + attachPlayerWithStories(playerEl, 2); + playerEl.appendChild(buildCircularWrappingConfig()); + + const player = new AmpStoryPlayer(win, playerEl); + + await player.load(); + await nextTick(); + + player.go(1, 0, {animate: false}); + + expect( + player + .getElement() + .querySelector('.i-amphtml-story-player-main-container') + .classList.contains('i-amphtml-story-player-no-navigation-transition') + ).to.be.true; + }); + + it('not supress navigation animation if called go with options.animate = true', async () => { + const playerEl = win.document.createElement('amp-story-player'); + attachPlayerWithStories(playerEl, 2); + playerEl.appendChild(buildCircularWrappingConfig()); + + const player = new AmpStoryPlayer(win, playerEl); + + await player.load(); + await nextTick(); + + player.go(1, 0, {animate: true}); + + expect( + player + .getElement() + .querySelector('.i-amphtml-story-player-main-container') + .classList.contains('i-amphtml-story-player-no-navigation-transition') + ).to.be.false; + }); + + it('revert navigation animation after transition ends', async () => { + const playerEl = win.document.createElement('amp-story-player'); + attachPlayerWithStories(playerEl, 2); + playerEl.appendChild(buildCircularWrappingConfig()); + + const player = new AmpStoryPlayer(win, playerEl); + + await player.load(); + await nextTick(); + + player.go(1, 0, {animate: false}); + + const rootEl = player + .getElement() + .querySelector('.i-amphtml-story-player-main-container'); + + // Wait for event dispatched to be listened + await new Promise((resolve) => setTimeout(() => resolve(), 50)); + + expect( + rootEl.classList.contains( + 'i-amphtml-story-player-no-navigation-transition' + ) + ).to.be.false; + }); }); }); From e76d797bed88c5d1f91850129a32c930e53970a4 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Thu, 6 May 2021 17:28:08 -0400 Subject: [PATCH 10/13] Apply suggestions from code review Co-authored-by: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com> --- src/amp-story-player/amp-story-player-impl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index f744ea307d94..60c014b37c4a 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -782,7 +782,7 @@ export class AmpStoryPlayer { renderPromise = this.render_(); - if (options?.animate != undefined) { + if (options.animate === false) { this.rootEl_.classList.toggle( CLASS_NO_NAVIGATION_TRANSITION, !options.animate @@ -995,7 +995,7 @@ export class AmpStoryPlayer { let showPromise = Promise.resolve(); if (this.currentIdx_ !== newStory.idx) { - showPromise = this.show(newStory.href, null, options); + showPromise = this.show(newStory.href, /* pageId */ null, options); } showPromise.then(() => { From f9ba02e7e6b4be87e13d13d0776fda0899a95f3e Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Mon, 10 May 2021 10:01:02 -0400 Subject: [PATCH 11/13] Use true instead of property Co-authored-by: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com> --- src/amp-story-player/amp-story-player-impl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 60c014b37c4a..3307b307ea29 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -785,7 +785,7 @@ export class AmpStoryPlayer { if (options.animate === false) { this.rootEl_.classList.toggle( CLASS_NO_NAVIGATION_TRANSITION, - !options.animate + true ); listenOnce(story.iframe, 'transitionend', () => { this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION); From 6c2ddda6d9294c9930f531dbda8d81d6a29408f1 Mon Sep 17 00:00:00 2001 From: Matias Szylkowski Date: Mon, 10 May 2021 17:22:50 -0400 Subject: [PATCH 12/13] Removed trailing whitespace --- examples/amp-story/player.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/amp-story/player.html b/examples/amp-story/player.html index ca36e5d51ed8..bbbe8f49d4e3 100644 --- a/examples/amp-story/player.html +++ b/examples/amp-story/player.html @@ -97,7 +97,7 @@

This is a NON-AMP page that embeds a story below:

A local’s guide to what to eat and do in Rome - +
Date: Tue, 11 May 2021 10:02:20 -0400 Subject: [PATCH 13/13] Fixed linting --- src/amp-story-player/amp-story-player-impl.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 3307b307ea29..7a3d082b05ee 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/src/amp-story-player/amp-story-player-impl.js @@ -783,10 +783,7 @@ export class AmpStoryPlayer { renderPromise = this.render_(); if (options.animate === false) { - this.rootEl_.classList.toggle( - CLASS_NO_NAVIGATION_TRANSITION, - true - ); + this.rootEl_.classList.toggle(CLASS_NO_NAVIGATION_TRANSITION, true); listenOnce(story.iframe, 'transitionend', () => { this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION); });