[Amp story] [Page attachments] [Outlink] Remove open attachment delay…

… and animation (ampproject#34477)

* Remove open attachment delay.

* Revise preview animation duration.

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;

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 {

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,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_() {
@@ -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);
  }
  }