chore(csr example): use animation for enter instead of transition

brofrain · Oct 26, 2023 · b0ea932 · b0ea932
1 parent d020b38
commit b0ea932
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/examples/csr/index.html b/examples/csr/index.html
@@ -6,6 +6,6 @@
 
     <title>CSR example</title>
 
-    <link data-trunk rel="tailwind-css" href="src/tailwind.css" />
+    <link data-trunk rel="tailwind-css" href="src/style.css" />
   </head>
 </html>
diff --git a/examples/csr/src/main.rs b/examples/csr/src/main.rs
@@ -145,7 +145,7 @@ fn App() -> impl IntoView {
                     key=|item| item.id
                     children=|item| item.view
                     enter_from_class="opacity-0"
-                    enter_class="duration-1000"
+                    enter_class="animate-fade-in-bottom-left"
                     move_class="duration-1000"
                     leave_class="opacity-0 duration-1000"
                     appear=true

diff --git a/examples/csr/src/style.css b/examples/csr/src/style.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes fade-in-bottom-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-150%, 150%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.animate-fade-in-bottom-left {
+  animation: fade-in-bottom-left 1s ease-out 1;
+}
diff --git a/examples/csr/src/tailwind.css b/examples/csr/src/tailwind.css