feat(Date Picker): add some animation when panel is collapsed

Endava · Apr 25, 2024 · 1e8de38 · 1e8de38
1 parent 4709ae6
commit 1e8de38
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/packages/beeq/src/components/panel/bq-panel.tsx b/packages/beeq/src/components/panel/bq-panel.tsx
@@ -138,10 +138,12 @@ export class BqPanel {
   render() {
     return (
       <div
-        class="bq-panel"
+        class={{
+          'bq-panel': true,
+          'panel-hidden': !this.open,
+        }}
         ref={(el) => (this.panel = el)}
         aria-hidden={!this.open ? 'true' : 'false'}
-        hidden={!this.open}
         part="panel"
       >
         <slot />

diff --git a/packages/beeq/src/components/panel/scss/bq-panel.scss b/packages/beeq/src/components/panel/scss/bq-panel.scss
@@ -17,3 +17,7 @@
 
   border-style: var(--bq-panel--border-style);
 }
+
+.panel-hidden {
+  @include animation-fade-out;
+}
diff --git a/packages/beeq/src/global/styles/mixins/_keyframes.scss b/packages/beeq/src/global/styles/mixins/_keyframes.scss
@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes slide-in {
   from {
     transform: translateY(10px);
@@ -28,6 +38,11 @@
   animation: fade-in $duration $timing-function $delay;
 }
 
+@mixin animation-fade-out($duration: 0.3s, $delay: 0s, $timing-function: ease) {
+  animation: fade-out $duration $timing-function $delay;
+  opacity: 0;
+}
+
 @mixin animation-slide-in($duration: 0.3s, $delay: 0s, $timing-function: ease) {
   animation:
     fade-in $duration $timing-function $delay,