Merge pull request #401 from petalframework/animation-bug

Slide Over and Modal animation issue with LiveView 1.0.4

Author: mitkins

lib/petal_components/modal.ex

@@ -55,7 +55,7 @@ defmodule PetalComponents.Modal do
       {@rest}
       class="hidden pc-modal"
     >
-      <div class="pc-modal__overlay" aria-hidden="true"></div>
+      <div class="hidden pc-modal__overlay" aria-hidden="true"></div>
       <div
         class="pc-modal__wrapper"
         aria-labelledby={"pc-modal__header__text-#{@id}"}
@@ -116,13 +116,12 @@ defmodule PetalComponents.Modal do
     )
     |> JS.hide(
       to: "##{id} .pc-modal__box",
-      time: 200,
       transition:
         {"transition-all transform ease-in duration-200",
          "opacity-100 translate-y-0 sm:scale-100",
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
-    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+    |> JS.hide(to: "##{id}", transition: {"block duration-200", "block", "hidden"})
     |> JS.remove_class("overflow-hidden", to: "body")
   end
 
@@ -133,10 +132,12 @@ defmodule PetalComponents.Modal do
     |> JS.show(to: "##{id}")
     |> JS.show(
       to: "##{id} .pc-modal__overlay",
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
       to: "##{id} .pc-modal__box",
+      time: 300,
       transition:
         {"transition-all transform ease-out duration-300",
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@@ -152,10 +153,10 @@ defmodule PetalComponents.Modal do
       class: assigns[:class] || ""
     }
 
-    base_classes = "pc-modal__box"
+    base_classes = "hidden pc-modal__box"
     max_width_class = "pc-modal__box--#{opts.max_width}"
     custom_classes = opts.class
 
-    [max_width_class, base_classes, custom_classes]
+    [base_classes, max_width_class, custom_classes]
   end
 end

lib/petal_components/slide_over.ex

@@ -46,7 +46,7 @@ defmodule PetalComponents.SlideOver do
       class="hidden pc-slide-over"
       id="slide-over"
     >
-      <div id="slide-over-overlay" class="pc-slideover__overlay" aria-hidden="true"></div>
+      <div id="slide-over-overlay" class="hidden pc-slideover__overlay" aria-hidden="true"></div>
 
       <div
         class={["pc-slideover__wrapper", get_margin_classes(@origin), @class]}
@@ -97,15 +97,13 @@ defmodule PetalComponents.SlideOver do
     |> JS.show(to: "#slide-over")
     |> JS.show(
       to: "#slide-over-overlay",
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
       to: "#slide-over-content",
-      transition: {
-        "transition-all transform ease-out duration-300",
-        start_class,
-        end_class
-      }
+      time: 300,
+      transition: {"transition-all transform ease-out duration-300", start_class, end_class}
     )
     |> JS.add_class("overflow-hidden", to: "body")
     |> JS.focus_first(to: "#slide-over-content")
@@ -121,22 +119,14 @@ defmodule PetalComponents.SlideOver do
     js =
       JS.remove_class("overflow-hidden", to: "body")
       |> JS.hide(
-        transition: {
-          "ease-in duration-200",
-          "opacity-100",
-          "opacity-0"
-        },
+        transition: {"ease-in duration-200", "opacity-100", "opacity-0"},
         to: "#slide-over-overlay"
       )
       |> JS.hide(
-        transition: {
-          "ease-in duration-200",
-          start_class,
-          end_class
-        },
+        transition: {"ease-in duration-200", start_class, end_class},
         to: "#slide-over-content"
       )
-      |> JS.hide(to: "#slide-over")
+      |> JS.hide(to: "#slide-over", transition: {"duration-200", "", ""})
 
     if close_slide_over_target do
       JS.push(js, "close_slide_over", target: close_slide_over_target)
@@ -155,7 +145,7 @@ defmodule PetalComponents.SlideOver do
   end
 
   defp get_classes(max_width, origin, class) do
-    base_classes = "pc-slideover__box"
+    base_classes = "hidden pc-slideover__box"
 
     slide_over_classes =
       case origin do

mix.lock

@@ -31,7 +31,7 @@
   "phoenix_html": {:hex, :phoenix_html, "4.2.0", "83a4d351b66f472ebcce242e4ae48af1b781866f00ef0eb34c15030d4e2069ac", [:mix], [], "hexpm", "9713b3f238d07043583a94296cc4bbdceacd3b3a6c74667f4df13971e7866ec8"},
   "phoenix_html_helpers": {:hex, :phoenix_html_helpers, "1.0.1", "7eed85c52eff80a179391036931791ee5d2f713d76a81d0d2c6ebafe1e11e5ec", [:mix], [{:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "cffd2385d1fa4f78b04432df69ab8da63dc5cf63e07b713a4dcf36a3740e3090"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.5.3", "f2161c207fda0e4fb55165f650f7f8db23f02b29e3bff00ff7ef161d6ac1f09d", [:mix], [{:file_system, "~> 0.3 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "b4ec9cd73cb01ff1bd1cac92e045d13e7030330b74164297d1aee3907b54803c"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "1.0.3", "33914a5d47345c7bde056054bca05c0bbbda5ce94a3ee734cb20a4d5d361e20d", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "157d93a5a7c79b836d9b7b5d55c7dd021435139d6160112f0e630f0686b8ea88"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "1.0.4", "327491b033e79db2f887b065c5a2993228449091883d74cfa1baa12f8c98d5eb", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a9865316ddf8d78f382d63af278d20436b52d262b60239956817a61279514366"},
   "phoenix_playground": {:hex, :phoenix_playground, "0.1.7", "2f48153eb12aa854cf0dd3973210faf3f26bf9bcc6657d714eaeafe15faf9d64", [:mix], [{:bandit, "~> 1.0", [hex: :bandit, repo: "hexpm", optional: false]}, {:floki, "~> 0.35", [hex: :floki, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_reload, "~> 1.5", [hex: :phoenix_live_reload, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.20.0 or ~> 1.0-rc", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "9e391e08db25846b47087c326b6df5bbd1c72c529285d53962efbea3d0a2e72c"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},

test/petal/modal_test.exs

@@ -117,13 +117,13 @@ defmodule PetalComponents.ModalTest do
       <.modal class="h-full"></.modal>
       """)
 
-    assert html =~ "\"pc-modal__box--md pc-modal__box h-full\""
+    assert html =~ "\"hidden pc-modal__box pc-modal__box--md h-full\""
 
     html =
       rendered_to_string(~H"""
       <.modal></.modal>
       """)
 
-    assert html =~ "\"pc-modal__box--md pc-modal__box \""
+    assert html =~ "\"hidden pc-modal__box pc-modal__box--md \""
   end
 end