From 5ed4cd53ca1b16711edf3618bca5e01e61b17bbf Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Tue, 7 Jun 2022 14:03:56 -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. (Transitions can start from this state.) 3. Set the :top-layer or (whatever) pseudo class. 4. Update style. (Animations/transitions happen here.) hidePopup(): 1. Remove the :top-layer pseudo class. 2. Update style. (Animations/transitions start here.) 3. If the hidePopup() call is not due to a "force out" situation, wait at this step until all finished promises on popup.getAnimations() resolve. 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 --- .../popup-animated-display-ref.tentative.html | 34 +++++++++++ ...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 +++++++++++++++++ 5 files changed, 227 insertions(+) create mode 100644 html/semantics/popups/popup-animated-display-ref.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-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
+
+ + + +