From cdc0cdcb986a7a4e501e330c29ed8852f3213017 Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Tue, 14 Jun 2022 18:43:58 -0700 Subject: [PATCH] Make popups animation-friendly Now, popups will follow this process when showing/hiding: showPopup(): 1. Move the popup to the top layer, and remove the UA display:none style. 2. Update style. (Transition initial style can be specified in this state.) 3. Set the :top-layer pseudo class. 4. Update style. (Animations/transitions happen here.) hidePopup(): 1. Capture any already-running animations via getAnimations(). 2. Remove the :top-layer pseudo class. 3. Update style. (Animations/transitions start here.) 4. If the hidePopup() call is not due to a "force out" situation, getAnimations() again, remove any from step #1, and then wait here until all of them finish or are cancelled. 4. Remove the popup from the top layer, and add the UA display:none style. 5. Update style. See this issue for more details: https://github.com/openui/open-ui/issues/335 Bug: 1307772 Change-Id: Ia20eb6e9533c1a0b1029ca1279d42fe2648300af Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3688871 Reviewed-by: Robert Flack Commit-Queue: Mason Freed Cr-Commit-Position: refs/heads/main@{#1014235} --- .../popup-animated-display-ref.tentative.html | 34 +++++++ ...popup-animated-hide-cleanup.tentative.html | 98 +++++++++++++++++++ ...popup-animated-hide-display.tentative.html | 61 ++++++++++++ ...-animated-hide-finishes-ref.tentative.html | 16 +++ ...opup-animated-hide-finishes.tentative.html | 60 ++++++++++++ ...popup-animated-show-display.tentative.html | 56 +++++++++++ 6 files changed, 325 insertions(+) create mode 100644 html/semantics/popups/popup-animated-display-ref.tentative.html create mode 100644 html/semantics/popups/popup-animated-hide-cleanup.tentative.html create mode 100644 html/semantics/popups/popup-animated-hide-display.tentative.html create mode 100644 html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html create mode 100644 html/semantics/popups/popup-animated-hide-finishes.tentative.html create mode 100644 html/semantics/popups/popup-animated-show-display.tentative.html diff --git a/html/semantics/popups/popup-animated-display-ref.tentative.html b/html/semantics/popups/popup-animated-display-ref.tentative.html new file mode 100644 index 00000000000000..77f15441ae95df --- /dev/null +++ b/html/semantics/popups/popup-animated-display-ref.tentative.html @@ -0,0 +1,34 @@ + + +
+
This is a popup
+ + + diff --git a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html new file mode 100644 index 00000000000000..762458ea669dda --- /dev/null +++ b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + + +I am a dialog + + + + diff --git a/html/semantics/popups/popup-animated-hide-display.tentative.html b/html/semantics/popups/popup-animated-hide-display.tentative.html new file mode 100644 index 00000000000000..410639e67152c8 --- /dev/null +++ b/html/semantics/popups/popup-animated-hide-display.tentative.html @@ -0,0 +1,61 @@ + + + + + + + +
This is a popup
+
+ + + + diff --git a/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html b/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html new file mode 100644 index 00000000000000..d8334f985ed51f --- /dev/null +++ b/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html @@ -0,0 +1,16 @@ + + +
+ + diff --git a/html/semantics/popups/popup-animated-hide-finishes.tentative.html b/html/semantics/popups/popup-animated-hide-finishes.tentative.html new file mode 100644 index 00000000000000..88e37cb4e3bd7d --- /dev/null +++ b/html/semantics/popups/popup-animated-hide-finishes.tentative.html @@ -0,0 +1,60 @@ + + + + + + + +
This is a popup
+
+ + + + diff --git a/html/semantics/popups/popup-animated-show-display.tentative.html b/html/semantics/popups/popup-animated-show-display.tentative.html new file mode 100644 index 00000000000000..deb75509264229 --- /dev/null +++ b/html/semantics/popups/popup-animated-show-display.tentative.html @@ -0,0 +1,56 @@ + + + + + + + +
This is a popup
+
+ + + +