update

ts_web/elements/sio-combox.ts

@@ -113,6 +113,19 @@ export class SioCombox extends DeesElement {
         overflow: hidden;
         font-family: ${unsafeCSS(fontFamilies.sans)};
         position: relative;
+        animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        transform-origin: bottom right;
+      }
+      
+      @keyframes scaleIn {
+        from {
+          opacity: 0;
+          transform: scale(0.9) translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+        }
       }
       
       :host::before {
@@ -150,31 +163,35 @@ export class SioCombox extends DeesElement {
           position: absolute;
           width: 100%;
           height: 100%;
-          transition: left 300ms ease;
+          transition: left 300ms ease, opacity 200ms ease;
         }
 
         sio-conversation-view {
           position: absolute;
           width: 100%;
           height: 100%;
-          transition: left 300ms ease;
+          transition: left 300ms ease, opacity 200ms ease;
         }
 
         /* Mobile navigation states */
         .container.show-list sio-conversation-selector {
           left: 0;
+          opacity: 1;
         }
 
         .container.show-list sio-conversation-view {
           left: 100%;
+          opacity: 0;
         }
 
         .container.show-conversation sio-conversation-selector {
           left: -100%;
+          opacity: 0;
         }
 
         .container.show-conversation sio-conversation-view {
           left: 0;
+          opacity: 1;
         }
       }