@ng-nest/ui 20.1.7 → 20.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-nest/ui",
-  "version": "20.1.7",
+  "version": "20.2.0",
   "license": "MIT",
   "homepage": "https://www.ngnest.com",
   "author": "ng-nest",
@@ -33,30 +33,26 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/ng-nest-ui.mjs"
     },
-    "./alert": {
-      "types": "./alert/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-alert.mjs"
-    },
     "./affix": {
       "types": "./affix/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-affix.mjs"
     },
-    "./api": {
-      "types": "./api/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-api.mjs"
+    "./alert": {
+      "types": "./alert/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-alert.mjs"
     },
     "./anchor": {
       "types": "./anchor/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-anchor.mjs"
     },
+    "./api": {
+      "types": "./api/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-api.mjs"
+    },
     "./attachments": {
       "types": "./attachments/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-attachments.mjs"
     },
-    "./auto-complete": {
-      "types": "./auto-complete/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-auto-complete.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-avatar.mjs"
@@ -65,6 +61,10 @@
       "types": "./back-top/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-back-top.mjs"
     },
+    "./auto-complete": {
+      "types": "./auto-complete/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-auto-complete.mjs"
+    },
     "./badge": {
       "types": "./badge/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-badge.mjs"
@@ -165,6 +165,10 @@
       "types": "./empty/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-empty.mjs"
     },
+    "./examples": {
+      "types": "./examples/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-examples.mjs"
+    },
     "./find": {
       "types": "./find/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-find.mjs"
@@ -173,22 +177,18 @@
       "types": "./form/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-form.mjs"
     },
-    "./examples": {
-      "types": "./examples/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-examples.mjs"
-    },
     "./highlight": {
       "types": "./highlight/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-highlight.mjs"
     },
-    "./icon": {
-      "types": "./icon/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-icon.mjs"
-    },
     "./i18n": {
       "types": "./i18n/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-i18n.mjs"
     },
+    "./icon": {
+      "types": "./icon/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-icon.mjs"
+    },
     "./image": {
       "types": "./image/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-image.mjs"
@@ -197,14 +197,14 @@
       "types": "./inner/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-inner.mjs"
     },
-    "./input-number": {
-      "types": "./input-number/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-input-number.mjs"
-    },
     "./input": {
       "types": "./input/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-input.mjs"
     },
+    "./input-number": {
+      "types": "./input-number/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-input-number.mjs"
+    },
     "./keyword": {
       "types": "./keyword/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-keyword.mjs"
@@ -213,26 +213,26 @@
       "types": "./layout/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-layout.mjs"
     },
-    "./list": {
-      "types": "./list/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-list.mjs"
-    },
     "./link": {
       "types": "./link/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-link.mjs"
     },
+    "./list": {
+      "types": "./list/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-list.mjs"
+    },
     "./loading": {
       "types": "./loading/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-loading.mjs"
     },
-    "./message": {
-      "types": "./message/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-message.mjs"
-    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-menu.mjs"
     },
+    "./message": {
+      "types": "./message/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-message.mjs"
+    },
     "./message-box": {
       "types": "./message-box/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-message-box.mjs"
@@ -269,22 +269,22 @@
       "types": "./portal/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-portal.mjs"
     },
-    "./prompts": {
-      "types": "./prompts/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-prompts.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-progress.mjs"
     },
-    "./rate": {
-      "types": "./rate/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-rate.mjs"
+    "./prompts": {
+      "types": "./prompts/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-prompts.mjs"
     },
     "./radio": {
       "types": "./radio/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-radio.mjs"
     },
+    "./rate": {
+      "types": "./rate/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-rate.mjs"
+    },
     "./resizable": {
       "types": "./resizable/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-resizable.mjs"
@@ -301,14 +301,14 @@
       "types": "./scrollable/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-scrollable.mjs"
     },
-    "./sender": {
-      "types": "./sender/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-sender.mjs"
-    },
     "./select": {
       "types": "./select/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-select.mjs"
     },
+    "./sender": {
+      "types": "./sender/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-sender.mjs"
+    },
     "./skeleton": {
       "types": "./skeleton/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-skeleton.mjs"
@@ -373,37 +373,37 @@
       "types": "./time-ago/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-time-ago.mjs"
     },
-    "./time-picker": {
-      "types": "./time-picker/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-time-picker.mjs"
-    },
     "./time-range": {
       "types": "./time-range/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-time-range.mjs"
     },
-    "./timeline": {
-      "types": "./timeline/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-timeline.mjs"
-    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tooltip.mjs"
     },
-    "./tree": {
-      "types": "./tree/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-tree.mjs"
+    "./transfer": {
+      "types": "./transfer/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-transfer.mjs"
     },
     "./tree-file": {
       "types": "./tree-file/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tree-file.mjs"
     },
+    "./timeline": {
+      "types": "./timeline/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-timeline.mjs"
+    },
     "./tree-select": {
       "types": "./tree-select/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tree-select.mjs"
     },
-    "./transfer": {
-      "types": "./transfer/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-transfer.mjs"
+    "./time-picker": {
+      "types": "./time-picker/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-time-picker.mjs"
+    },
+    "./tree": {
+      "types": "./tree/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-tree.mjs"
     },
     "./typography": {
       "types": "./typography/index.d.ts",

package/popover/index.d.ts

@@ -117,7 +117,8 @@ declare class XPopoverPortalComponent {
     portalHover: _angular_core.OutputEmitterRef<boolean>;
     mouseenter(): void;
     mouseleave(): void;
-    animation: boolean;
+    animateEnter: string;
+    animateLeave: string;
     classMap: _angular_core.Signal<{
         [x: string]: boolean;
     }>;

package/select/index.d.ts

@@ -127,6 +127,13 @@ declare class XSelectProperty extends XSelectProperty_base {
      * @en_US Display Border
      */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN 输入框样式
+     * @en_US Input Style
+     */
+    readonly inputStyle: _angular_core.InputSignal<{
+        [style: string]: any;
+    } | undefined>;
     /**
      * @zh_CN 下拉框的最大高度
      * @en_US The biggest height of the drop-down box
@@ -295,7 +302,7 @@ declare class XSelectProperty extends XSelectProperty_base {
      */
     readonly inputValidator: _angular_core.InputSignal<((value: any) => boolean) | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XSelectProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XSelectProperty, "x-select-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "maxTagContent": { "alias": "maxTagContent"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "allowInput": { "alias": "allowInput"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XSelectProperty, "x-select-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "maxTagContent": { "alias": "maxTagContent"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "allowInput": { "alias": "allowInput"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
 }
 /**
  * Select Option
@@ -533,7 +540,8 @@ type XSelectVariant = XVariant;
 declare const XSelectPortalPrefix = "x-select-portal";
 
 declare class XSelectPortalComponent implements OnInit {
-    get getPlacement(): XPlacement;
+    animateEnter: string;
+    animateLeave: string;
     done(): void;
     start(): void;
     destroy: _angular_core.WritableSignal<boolean>;
@@ -557,6 +565,7 @@ declare class XSelectPortalComponent implements OnInit {
     virtualScroll: _angular_core.InputSignal<boolean>;
     keywordText: _angular_core.InputSignal<any>;
     size: _angular_core.InputSignal<XSize | undefined>;
+    showPortal: _angular_core.WritableSignal<boolean>;
     animating: _angular_core.OutputEmitterRef<boolean>;
     nodeClick: _angular_core.OutputEmitterRef<{
         node: XSelectNode | null;

package/style/animates/base.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-base-enter {
+  animation: x-base-enter $x-animation-duration-base;
+  animation-timing-function: ease-in;
+}
+.x-base-leave {
+  animation: x-base-leave $x-animation-duration-base;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-base-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes x-base-leave {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}

package/style/animates/conect.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-connect-enter {
+  animation: x-connect-enter $x-animation-duration-fast;
+  animation-timing-function: ease-in;
+}
+.x-connect-leave {
+  animation: x-connect-leave $x-animation-duration-fast;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-connect-enter {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes x-connect-leave {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+}

package/style/animates/fade.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-fade-enter {
+  animation: x-fade-enter $x-animation-duration-fast;
+  animation-timing-function: ease-in;
+}
+.x-fade-leave {
+  animation: x-fade-leave $x-animation-duration-fast;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-fade-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes x-fade-leave {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}

package/style/animates/index.scss

@@ -0,0 +1,11 @@
+@use './base' as *;
+@use './conect' as *;
+@use './fade' as *;
+@use './slide' as *;
+@use './move' as *;
+@use './opacity' as *;
+
+.x-animate-disabled {
+  animation: none !important;
+  transition: none !important;
+}

package/style/animates/move.scss

@@ -0,0 +1,129 @@
+@use '../params/index.scss' as *;
+
+.x-move-top-start-enter,
+.x-move-top-enter,
+.x-move-top-end-enter,
+.x-move-center-enter {
+  animation: x-move-top-enter $x-animation-duration-base ease-in;
+}
+
+.x-move-top-start-leave,
+.x-move-top-leave,
+.x-move-top-end-leave,
+.x-move-center-leave {
+  animation: x-move-top-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-top-enter {
+  from {
+    transform: translateY(-2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-top-leave {
+  from {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-left-enter {
+  animation: x-move-left-enter $x-animation-duration-base ease-in;
+}
+.x-move-left-leave {
+  animation: x-move-left-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-left-enter {
+  from {
+    transform: translateX(-2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-left-leave {
+  from {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-right-enter {
+  animation: x-move-right-enter $x-animation-duration-base ease-in;
+}
+.x-move-right-leave {
+  animation: x-move-right-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-right-enter {
+  from {
+    transform: translateX(2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-right-leave {
+  from {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-bottom-start-enter,
+.x-move-bottom-enter,
+.x-move-bottom-end-enter {
+  animation: x-move-bottom-enter $x-animation-duration-base ease-in;
+}
+
+.x-move-bottom-start-leave,
+.x-move-bottom-leave,
+.x-move-bottom-end-leave {
+  animation: x-move-bottom-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-bottom-enter {
+  from {
+    transform: translateY(2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-bottom-leave {
+  from {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(2rem);
+    opacity: 0;
+  }
+}

package/style/animates/opacity.scss

@@ -0,0 +1,26 @@
+@use '../params/index.scss' as *;
+
+.x-opacity-enter {
+  animation: x-opacity-enter $x-animation-duration-slow ease-in;
+}
+.x-opacity-leave {
+  animation: x-opacity-leave $x-animation-duration-slow ease-out;
+}
+
+@keyframes x-opacity-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes x-opacity-leave {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}