LiveView and enter / leave transitions?

Phoenix Forum Questions / Help
, ,
21

I received a response, and they are looking at possibilities putting up an online viewing subscription.

This must be tough for them because if they make it too cheap, many will choose to skip the live online conference, and just wait for the videos. I suspect they will keep the teaching sessions private (or make them a premium-pay service), and provide a less-expensive membership to view the talks?

I will support them either way :slight_smile:

2 Likes
22

My article on creating LiveView modals with Tailwind CSS and Alpine.js is up.

5 Likes
23

Chris’ LV video from ElixirConf EU V 2020 is now up: https://www.youtube.com/watch?v=VU1JMg9AbLQ

4 Likes
24

This is how I set up the mobile menu transitions for a tailwind ui template. It requires three changes:

  1. Add id’s to two of the elements
  2. Change their classes slightly (lg:hidden → hidden and flex → hidden)
  3. Add click handlers
--- a/lib/my_app_web/components/layouts/app.html.heex
+++ b/lib/my_app_web/components/layouts/app.html.heex
@@ -4,33 +4,25 @@
 
     Off-canvas menu for mobile, show/hide based on off-canvas menu state.
   -->
-  <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+  <div id="mobile-menu-wrapper" class="relative z-40 hidden" role="dialog" aria-modal="true">
     <!--
       Off-canvas menu backdrop, show/hide based on off-canvas menu state.
-
-      Entering: "transition-opacity ease-linear duration-300"
-        From: "opacity-0"
-        To: "opacity-100"
-      Leaving: "transition-opacity ease-linear duration-300"
-        From: "opacity-100"
-        To: "opacity-0"
     -->
     <div class="fixed inset-0 bg-black bg-opacity-25"></div>
 
     <div class="fixed inset-0 z-40 flex">
       <!--
         Off-canvas menu, show/hide based on off-canvas menu state.
-
-        Entering: "transition ease-in-out duration-300 transform"
-          From: "-translate-x-full"
-          To: "translate-x-0"
-        Leaving: "transition ease-in-out duration-300 transform"
-          From: "translate-x-0"
-          To: "-translate-x-full"
       -->
-      <div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
+      <div
+        id="mobile-menu"
+        phx-click-away={toggle_mobile_menu()}
+        class="relative hidden w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
+      >
         <div class="flex px-4 pb-2 pt-5">
+          <!-- Close button -->
           <button
+            phx-click={toggle_mobile_menu()}
             type="button"
             class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
           >
@@ -488,7 +480,11 @@
         <div class="flex h-16 items-center justify-between">
           <div class="flex flex-1 items-center lg:hidden">
             <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
-            <button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
+            <button
+              phx-click={toggle_mobile_menu()}
+              type="button"
+              class="-ml-2 rounded-md bg-white p-2 text-gray-400"
+            >
               <span class="sr-only">Open menu</span>
               <svg
                 class="h-6 w-6"

Then in lib/my_app_web/components/layouts.ex I define the toggle function:

  def toggle_mobile_menu(js \\ %JS{}) do
    js
    |> JS.toggle(
      to: "#mobile-menu-wrapper",
      in:
        {"transition-opacity ease-linear duration-300", "transform opacity-0",
         "transform opacity-100"},
      out:
        {"transition-opacity ease-linear duration-300", "transform opacity-100",
         "transform opacity-0"}
    )
    |> JS.toggle(
      to: "#mobile-menu",
      in: {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"},
      out: {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"}
    )
  end
3 Likes