From c90c288822c8a7c8881c82a4bde74e50d497165b Mon Sep 17 00:00:00 2001 From: processprocess Date: Fri, 21 May 2021 09:27:35 -0400 Subject: [PATCH 1/2] Remove open attachment delay. --- .../1.0/amp-story-open-page-attachment.css | 10 ------- .../1.0/amp-story-page-attachment.css | 2 +- .../1.0/amp-story-page-attachment.js | 28 ++----------------- 3 files changed, 3 insertions(+), 37 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-open-page-attachment.css b/extensions/amp-story/1.0/amp-story-open-page-attachment.css index b011d2abebec..69e7ffbebe50 100644 --- a/extensions/amp-story/1.0/amp-story-open-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.css @@ -318,16 +318,6 @@ animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important; } -.i-amphtml-story-page-open-attachment.i-amphtml-story-page-open-attachment-opening { - animation: fade-out 0.3s both !important; -} - -@keyframes fade-out { - 100% { - opacity: 0; - } -} - .i-amphtml-story-outlink-page-attachment-arrow { display: block !important; cursor: pointer !important; diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css index a7d7c4a0c505..7be8ce38db3e 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-page-attachment.css @@ -172,7 +172,7 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa background-color: var(--i-amphtml-outlink-cta-text-color) !important; opacity: .6 !important; transform-origin: left !important; - animation: progress-bar-animation both 1s !important; + animation: progress-bar-animation .6s both cubic-bezier(0.4, 0.0, 1, 1) !important; } [dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after { diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.js b/extensions/amp-story/1.0/amp-story-page-attachment.js index 63ca69bd2c97..541fedd3bf49 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.js +++ b/extensions/amp-story/1.0/amp-story-page-attachment.js @@ -361,38 +361,14 @@ export class AmpStoryPageAttachment extends DraggableDrawer { } /** - * Triggers a remote attachment opening animation, and redirects to the - * specified URL. + * Redirects to the specified URL. * @private */ openRemoteV2_() { const clickTarget = this.element.parentElement .querySelector('.i-amphtml-story-page-open-attachment-host') .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment'); - - const isMobileUI = - this.storeService_.get(StateProperty.UI_STATE) === UIType.MOBILE; - // Shows outlink url preview on mobile only. - if (!isMobileUI) { - triggerClickFromLightDom(clickTarget, this.element); - } else { - const animationEl = this.win.document.createElement('div'); - const storyEl = closest(this.element, (el) => el.tagName === 'AMP-STORY'); - - this.mutateElement(() => { - clickTarget.classList.add( - 'i-amphtml-story-page-open-attachment-opening' - ); - }); - // Play post-tap animation before opening link. - this.win.setTimeout(() => { - this.mutateElement(() => { - animationEl.classList.add('i-amphtml-story-page-attachment-expand'); - storyEl.appendChild(animationEl); - }); - triggerClickFromLightDom(clickTarget, this.element); - }, 1000); - } + triggerClickFromLightDom(clickTarget, this.element); } /** From 9f30a097cce7c4e3cf6fb2d24c02b40983056689 Mon Sep 17 00:00:00 2001 From: processprocess Date: Fri, 21 May 2021 10:36:35 -0400 Subject: [PATCH 2/2] Revise preview animation duration. --- .../1.0/amp-story-page-attachment.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.js b/extensions/amp-story/1.0/amp-story-page-attachment.js index 541fedd3bf49..6ac751eeca3e 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.js +++ b/extensions/amp-story/1.0/amp-story-page-attachment.js @@ -53,6 +53,14 @@ const DRAG_CAP_PX = 48; */ const DRAG_CAP_PX_V2 = 56; +/** + * Duration of post-tap URL preview progress bar animation minus 100ms. + * The minus 100ms roughly accounts for the small system delay in opening a link. + * Used for the amp-story-outlink-page-attachment-v2 experiment. + * @const {number} + */ +const POST_TAP_ANIMATION_DURATION = 500; + /** * @enum {string} */ @@ -361,14 +369,25 @@ export class AmpStoryPageAttachment extends DraggableDrawer { } /** - * Redirects to the specified URL. + * Triggers a remote attachment preview URL animation, and redirects + * to the specified URL. * @private */ openRemoteV2_() { const clickTarget = this.element.parentElement .querySelector('.i-amphtml-story-page-open-attachment-host') .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment'); - triggerClickFromLightDom(clickTarget, this.element); + + const isMobileUI = + this.storeService_.get(StateProperty.UI_STATE) === UIType.MOBILE; + // Shows outlink url preview on mobile only. + if (!isMobileUI) { + triggerClickFromLightDom(clickTarget, this.element); + } else { + this.win.setTimeout(() => { + triggerClickFromLightDom(clickTarget, this.element); + }, POST_TAP_ANIMATION_DURATION); + } } /**