Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Amp story] [Page attachments] [Outlink] Remove open attachment delay and animation #34477

Merged
merged 4 commits into from
May 24, 2021
Merged

[Amp story] [Page attachments] [Outlink] Remove open attachment delay and animation #34477

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c90c288
Remove open attachment delay.
processprocess May 21, 2021
9f30a09
Revise preview animation duration.
processprocess May 21, 2021
39b0171
Merge branch 'main' of github.com:ampproject/amphtml into open-state
processprocess May 21, 2021
9b77cfe
Merge branch 'main' of github.com:ampproject/amphtml into open-state
processprocess May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions extensions/amp-story/1.0/amp-story-open-page-attachment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story/1.0/amp-story-page-attachment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
mszylkowski marked this conversation as resolved.
Show resolved Hide resolved
}

[dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after {
Expand Down
27 changes: 11 additions & 16 deletions extensions/amp-story/1.0/amp-story-page-attachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
*/
Expand Down Expand Up @@ -361,8 +369,8 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
}

/**
* Triggers a remote attachment opening animation, and redirects to the
* specified URL.
* Triggers a remote attachment preview URL animation, and redirects
* to the specified URL.
* @private
*/
openRemoteV2_() {
Expand All @@ -376,22 +384,9 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
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);
}, POST_TAP_ANIMATION_DURATION);
}
}

Expand Down