Merge pull request #294 from letehaha/feat/make-form-error-appear-smooth

feat: Make form error appear smooth
letehaha · May 18, 2024 · b70c9d3 · b70c9d3
2 parents b862ca8 + d222536
commit b70c9d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/backend b/backend
diff --git a/src/components/fields/form-wrapper.vue b/src/components/fields/form-wrapper.vue
@@ -32,14 +32,27 @@ defineProps<{
   display: grid;
   grid-gap: 8px;
 
-  &:not(:empty) {
-    margin-bottom: 16px;
-  }
+  animation: slide-appear 1s ease-out 300ms both;
 }
 .form-wrapper__error {
   text-align: center;
   color: var(--app-danger-color-text);
   font-size: 14px;
   line-height: 1.3;
+  overflow: hidden;
+}
+
+@keyframes slide-appear {
+  0% {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  50% {
+    grid-template-rows: 1fr;
+  }
+  100% {
+    opacity: 1;
+    grid-template-rows: 1fr;
+  }
 }
 </style>