@will-ui/vue 1.0.0

package/dist/theme/tokens/components/list.css

@@ -0,0 +1,97 @@
+.w-list {
+  --__size: var(--w-prop-list-size, var(--w-list-size, var(--w-size)));
+  --__color: var(--w-prop-list-color, var(--w-list-color, var(--w-color)));
+  /* inherit：嵌在 Layer 等表面内时跟随父级；独立使用时 background 再回退 --w-bg-color */
+  --__bg: var(--w-prop-list-bg-color, var(--w-list-bg-color, inherit));
+  --__text: var(--w-prop-list-text-color, var(--w-list-text-color, inherit));
+  --__color-light-9: color-mix(
+    in srgb,
+    var(--__color) var(--w-list-color-light-9-mix),
+    var(--__bg, var(--w-bg-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-list-font-ratio)));
+  --__pad-x: calc(var(--__size) * var(--w-list-pad-x-ratio));
+  --__panel-pad: clamp(5px, calc(var(--__size) * var(--w-list-panel-pad-ratio)), 12px);
+  --__item-gap: min(2.5px, calc(var(--__panel-pad) / 2));
+  --__item-radius: max(
+    0px,
+    calc(var(--w-radius) - var(--w-list-item-radius-inset))
+  );
+  --w-list-item-height: var(--__size);
+  --w-list-panel-padding: var(--__panel-pad);
+  --w-list-item-gap: var(--__item-gap);
+  /* 子件 Checkbox / Fallback→Loading·Empty 跟本实例有效核 */
+  --w-prop-checkbox-size: var(--__size);
+  --w-prop-checkbox-color: var(--__color);
+  --w-prop-loading-size: var(--__size);
+  --w-prop-empty-size: var(--__size);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--__item-gap);
+  padding: var(--__panel-pad);
+  background-color: var(--__bg, var(--w-bg-color));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  font-size: var(--__font);
+  border-radius: var(--w-radius);
+  color: var(--__text, var(--w-color-font-1));
+
+  & .w-list-fallback {
+    min-height: calc(var(--__size) * var(--w-list-fallback-min-h-ratio));
+    overflow: hidden;
+  }
+
+  & .w-list-item {
+    --__item-size: var(
+      --w-list-item-height,
+      var(--w-prop-list-size, var(--w-list-size, var(--w-size)))
+    );
+    --__color: var(--w-prop-list-color, var(--w-list-color, var(--w-color)));
+    --__color-light-9: color-mix(
+      in srgb,
+      var(--__color) var(--w-list-color-light-9-mix),
+      var(--__bg, var(--w-bg-color))
+    );
+
+    height: var(--__item-size);
+    line-height: var(--__item-size);
+    padding: 0 var(--__pad-x, calc(var(--__item-size) * 0.25));
+    border-radius: var(--w-list-item-radius, var(--__item-radius));
+    color: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    transition:
+      color var(--w-transition-quick-time, var(--w-transition-time))
+        var(--w-cubic-bezier-quick, ease),
+      background-color var(--w-transition-quick-time, var(--w-transition-time))
+        var(--w-cubic-bezier-quick, ease);
+
+    &.w-list-item-between {
+      justify-content: space-between;
+    }
+
+    &.w-list-item-disabled {
+      color: var(--w-color-disabled);
+      cursor: not-allowed;
+    }
+
+    &.w-list-item-active {
+      color: var(--__color);
+      background-color: var(--__color-light-9);
+    }
+
+    &:hover:not(.w-list-item-disabled):not(.w-list-item-active) {
+      /* 中性浅底，区别于列表底与 active 的品牌浅染 */
+      background-color: color-mix(
+        in srgb,
+        var(--__text, var(--w-text-color)) var(--w-list-item-hover-mix),
+        var(--__bg, var(--w-bg-color))
+      );
+    }
+  }
+}

package/dist/theme/tokens/components/loading.css

@@ -0,0 +1,64 @@
+/* 区域加载容器（LoadingArea）；内部 overlay Loading 相对此节点铺满 */
+.w-loading-area {
+  position: relative;
+}
+
+.w-loading {
+  --__size: var(--w-prop-loading-size, var(--w-loading-size, var(--w-size)));
+  /* 主色三级；未设时回退 --w-loading-icon-color（历史灰），勿硬挂品牌主色 */
+  --__color: var(
+    --w-prop-loading-color,
+    var(--w-loading-color, var(--w-loading-icon-color))
+  );
+  --__text: var(
+    --w-prop-loading-text-color,
+    var(--w-loading-text-color, var(--w-text-color))
+  );
+  /* 有 size prop / 父桥接时图标=实例核；未设时按全局核比例派生（对齐原 calc(--w-size * 5/12)） */
+  --w-loading-icon-size: var(--w-prop-loading-size, calc(var(--__size) * var(--w-loading-icon-ratio)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-loading-font-ratio)));
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--__font);
+
+  &.w-loading-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    background-color: var(--w-loading-mask-bg);
+  }
+
+  & .w-loading-text {
+    color: var(--__text);
+    white-space: nowrap;
+    margin-top: var(--w-loading-text-gap);
+  }
+
+  & .w-loading-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--w-loading-icon-size);
+    width: var(--w-loading-icon-size);
+    height: var(--w-loading-icon-size);
+    line-height: 1;
+    color: var(--__color);
+    will-change: transform;
+    animation: w-loading-roll var(--w-loading-spin-duration) linear infinite;
+  }
+}
+
+@keyframes w-loading-roll {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+}

package/dist/theme/tokens/components/mask.css

@@ -0,0 +1,26 @@
+.w-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--w-mask-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--__w-mask-z-index, 90);
+}
+
+.w-mask-fade-enter-active,
+.w-mask-fade-leave-active {
+  transition: opacity var(--w-transition-slow-time) var(--w-cubic-bezier-quick);
+}
+
+.w-mask-fade-leave-active {
+  transition: opacity var(--w-transition-time) var(--w-cubic-bezier);
+}
+
+.w-mask-fade-enter-from,
+.w-mask-fade-leave-to {
+  opacity: 0;
+}

package/dist/theme/tokens/components/match.css

@@ -0,0 +1,119 @@
+.w-match {
+  --__size: var(--w-prop-match-size, var(--w-match-size, var(--w-size)));
+  --__color: var(--w-prop-match-color, var(--w-match-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-match-bg-color,
+    var(--w-match-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-match-text-color,
+    var(--w-match-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__icon-gap: calc(var(--__size) * var(--w-match-icon-gap-ratio));
+  --__close-offset: calc(var(--__size) * var(--w-match-close-offset-ratio));
+  --w-prop-write-size: var(--__size);
+  --w-prop-write-bg-color: var(--__bg);
+  --w-prop-write-text-color: var(--__text);
+  --w-close-font-size: var(--__icon);
+  --w-icon-font-size: var(--__icon);
+
+  user-select: none;
+  box-sizing: border-box;
+  font-size: var(--__font);
+
+  & .w-close {
+    transform: translateX(var(--__close-offset));
+  }
+
+  & i.w-match-icon {
+    margin-right: var(--__icon-gap);
+    color: var(--w-form-item-icon-color);
+  }
+}
+
+.w-match-block {
+  display: flex;
+}
+
+.w-layer-content.w-match-layer {
+  --__size: var(--w-prop-match-size, var(--w-match-size, var(--w-size)));
+  --__color: var(--w-prop-match-color, var(--w-match-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-match-bg-color,
+    var(--w-match-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-match-text-color,
+    var(--w-match-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__panel-pad: calc(var(--__size) * var(--w-choose-panel-pad-ratio));
+  /* 子件跟本实例有效基；表面由 Layer --__bg/--__text 接线（JS 桥 --w-prop-layer-*） */
+  --w-prop-list-size: var(--__size);
+  --w-prop-list-color: var(--__color);
+  --w-prop-list-bg-color: var(--__bg);
+  --w-prop-list-text-color: var(--__text);
+
+  /* 与 Choose2 一致：弹层不另加 pad，列表用 List 自身 panel padding */
+  padding: 0;
+  background-color: var(--__bg);
+  color: var(--__text);
+  max-height: var(--w-match-layer-max-height);
+  overflow: hidden auto;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  border-radius: var(--w-radius);
+  font-size: var(--__font);
+
+  & .w-choose-fallback,
+  & .w-list-fallback {
+    min-height: calc(var(--__size) * var(--w-match-fallback-min-h-ratio));
+    overflow: hidden;
+  }
+}
+
+.w-match-item {
+  --__size: var(--w-prop-match-size, var(--w-match-size, var(--w-size)));
+  --__color: var(--w-prop-match-color, var(--w-match-color, var(--w-color)));
+  --__color-light-5: color-mix(in srgb, var(--__color) var(--w-match-item-color-light-5-mix), var(--__bg, var(--w-bg-color)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__pad-x: calc(var(--__size) * var(--w-form-item-pad-x-ratio));
+  --__item-radius: max(
+    0px,
+    calc(var(--w-radius) - var(--w-match-item-radius-inset))
+  );
+
+  height: var(--__size);
+  line-height: var(--__size);
+  padding: 0 var(--__pad-x);
+  border-radius: var(--__item-radius);
+  font-size: var(--__font);
+  color: var(--w-color-font-2);
+  cursor: pointer;
+  display: block;
+  box-sizing: border-box;
+  transition:
+    color var(--w-transition-quick-time) var(--w-cubic-bezier-quick, ease),
+    background-color var(--w-transition-quick-time) var(--w-cubic-bezier-quick, ease);
+
+  &.w-match-item-disabled {
+    color: var(--w-form-item-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &:hover:not(.w-match-item-disabled) {
+    color: var(--__color);
+  }
+
+  &.w-match-item-active {
+    color: var(--__color);
+    background-color: var(--__color-light-5);
+  }
+}

package/dist/theme/tokens/components/modal.css

@@ -0,0 +1,136 @@
+.w-modal-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.w-modal {
+  --__size: var(--w-prop-modal-size, var(--w-modal-size, var(--w-size)));
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-modal-font-ratio))
+  );
+  --__title-font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-modal-title-font-ratio))
+  );
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-modal-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__bg: var(--w-prop-modal-bg-color, var(--w-modal-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-modal-text-color,
+    var(--w-modal-text-color, var(--w-text-color))
+  );
+  /* 尺度派生：header / pad 跟有效核；footer 底用 mix（可在 :root 改 --w-modal-footer-bg-mix） */
+  --w-modal-header-height: calc(
+    var(--__size) * var(--w-modal-header-height-ratio)
+  );
+  --w-modal-padding-x: calc(var(--__size) * var(--w-modal-padding-x-ratio));
+  --w-close-font-size: var(--__icon);
+  /* 子件跟本实例有效核：只写子 prop 层（Close 走 --w-close-font-size） */
+  --w-prop-btn-size: var(--__size);
+  --w-prop-btn-bg-color: var(--__bg);
+  --w-prop-btn-text-color: var(--__text);
+  --w-prop-loading-size: var(--__size);
+
+  position: absolute;
+  width: var(--w-modal-width);
+  /* 高度一定要有，否则 w-modal-body 不会出现滚动条 */
+  height: var(--w-modal-height);
+  max-width: var(--w-modal-max-width, 100vw);
+  max-height: var(--w-modal-max-height, calc(100% - var(--w-gap) * 2));
+  min-height: var(--w-modal-min-height);
+  background-color: var(--__bg);
+  color: var(--__text);
+  border-radius: var(--w-radius);
+  box-shadow: var(--w-modal-box-shadow);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--__font);
+
+  &.w-modal--white {
+    background-color: var(--__bg);
+  }
+
+  & .w-modal-close {
+    position: absolute;
+    top: calc((var(--w-modal-header-height) - var(--__icon)) / 2);
+    right: var(--w-modal-padding-x);
+    z-index: 1;
+  }
+
+  & .w-modal-header {
+    display: flex;
+    min-width: 0;
+    flex-shrink: 0;
+    height: var(--w-modal-header-height);
+    padding: 0 var(--w-modal-padding-x);
+    padding-right: calc(
+      var(--w-modal-padding-x) + var(--__icon) + var(--w-modal-padding-x)
+    );
+    background-color: var(--__bg);
+    align-items: center;
+    border-radius: var(--w-radius) var(--w-radius) 0 0;
+    font-size: var(--__title-font);
+  }
+
+  & .w-modal-dragger {
+    flex: 1;
+    align-self: stretch;
+    cursor: move;
+  }
+
+  & .w-modal-title {
+    font-size: inherit;
+    font-weight: var(--w-modal-title-weight);
+  }
+
+  & .w-modal-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    padding: var(--w-modal-padding-x);
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  &.w-scale-from-trigger.w-scale-enter-active,
+  &.w-scale-from-trigger.w-scale-leave-active {
+    overflow: hidden;
+
+    & .w-modal-body {
+      overflow: hidden;
+    }
+  }
+
+  & .w-modal-footer {
+    padding: var(--w-modal-footer-padding-y) var(--w-modal-padding-x);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: color-mix(
+      in srgb,
+      var(--__text) var(--w-modal-footer-bg-mix),
+      var(--__bg)
+    );
+    border-radius: 0 0 var(--w-radius) var(--w-radius);
+  }
+
+  & .w-modal-loading {
+    position: absolute;
+    top: var(--w-modal-header-height);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--w-fade-white-background-color);
+  }
+}

package/dist/theme/tokens/components/notice.css

@@ -0,0 +1,264 @@
+.w-notice {
+  --w-notice-offset: var(--w-gap);
+  /* 进场略长、退场略短；大行程 + 强缩放 + 轻微模糊 */
+  --w-notice-enter-duration: 0.56s;
+  --w-notice-leave-duration: 0.46s;
+  --w-notice-ease-out: cubic-bezier(0.16, 1.15, 0.3, 1);
+  --w-notice-ease-in: cubic-bezier(0.45, 0, 0.55, 1);
+  --__notice-from-blur: 10px;
+  position: fixed;
+  display: flex;
+  align-items: flex-end;
+  pointer-events: none;
+  z-index: 1;
+
+  &.w-notice--top {
+    flex-direction: column;
+    align-items: center;
+    top: var(--w-notice-offset);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.w-notice--bottom {
+    flex-direction: column-reverse;
+    align-items: center;
+    bottom: var(--w-notice-offset);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.w-notice--top-end {
+    flex-direction: column;
+    top: var(--w-notice-offset);
+    right: var(--w-notice-offset);
+  }
+
+  &.w-notice--bottom-end {
+    flex-direction: column-reverse;
+    bottom: var(--w-notice-offset);
+    right: var(--w-notice-offset);
+  }
+
+  &.w-notice--top-start {
+    flex-direction: column;
+    top: var(--w-notice-offset);
+    left: var(--w-notice-offset);
+  }
+
+  &.w-notice--bottom-start {
+    flex-direction: column-reverse;
+    bottom: var(--w-notice-offset);
+    left: var(--w-notice-offset);
+  }
+}
+
+.w-notice-item {
+  --__size: var(--w-prop-notice-size, var(--w-notice-size, var(--w-size)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-notice-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-notice-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__color: var(--w-prop-notice-color, var(--w-notice-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-notice-bg-color,
+    var(--w-notice-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-notice-text-color,
+    var(--w-notice-text-color, var(--w-text-color))
+  );
+  /* 强调色：default/info 走三级主色；success/warning/error 用语义色 */
+  --__accent: var(--__color);
+  --w-notice-icon-size: var(--__icon);
+  --w-close-font-size: var(--__icon);
+  --w-notice-bg: var(--__bg);
+  --w-notice-fg: var(--__text);
+  --w-notice-icon-color: var(--__accent);
+  --w-color-font-2: color-mix(in srgb, var(--__text) var(--w-notice-font-2-mix), var(--__bg));
+  --w-notice-pad: calc(var(--__size) * var(--w-notice-pad-y-ratio)) calc(var(--__size) * var(--w-notice-pad-x-ratio));
+  --w-notice-gap-item: calc(var(--__size) * var(--w-notice-gap-item-ratio));
+  --w-notice-inner-gap: calc(var(--__size) * var(--w-notice-inner-gap-ratio));
+  --w-notice-w: var(--w-notice-width, auto);
+  --w-notice-mw: var(--w-notice-max-width, 360px);
+  --w-notice-minw: var(--w-notice-min-width, 200px);
+  /* 进/出场：更大行程 + 更强缩放 */
+  --__notice-from-x: 0px;
+  --__notice-from-y: -56px;
+  --__notice-from-scale: 0.78;
+
+  position: relative;
+  pointer-events: auto;
+  box-sizing: border-box;
+  box-shadow: var(--w-notice-box-shadow);
+  border-radius: var(--w-notice-border-radius);
+  background-color: var(--w-notice-bg);
+  color: var(--w-notice-fg);
+  padding: var(--w-notice-pad);
+  width: var(--w-notice-w);
+  min-width: var(--w-notice-minw);
+  max-width: var(--w-notice-mw);
+  height: var(--__notice-item-height, auto);
+  border: var(--w-notice-border, none);
+  font-size: var(--__font);
+  line-height: var(--w-notice-line-height, 1.5);
+
+  @supports (backdrop-filter: blur(15px)) {
+    background-color: var(
+      --w-notice-bg-blur,
+      color-mix(in srgb, var(--w-notice-bg) 72%, transparent)
+    );
+    backdrop-filter: var(--w-notice-backdrop-filter, blur(15px));
+  }
+
+  &.w-notice-item--top {
+    --__notice-from-x: 0px;
+    --__notice-from-y: -56px;
+    margin-top: var(--w-notice-gap-item);
+  }
+
+  &.w-notice-item--bottom {
+    --__notice-from-x: 0px;
+    --__notice-from-y: 56px;
+    margin-bottom: var(--w-notice-gap-item);
+  }
+
+  &.w-notice-item--top-end {
+    --__notice-from-x: 64px;
+    --__notice-from-y: -20px;
+    margin-top: var(--w-notice-gap-item);
+  }
+
+  &.w-notice-item--bottom-end {
+    --__notice-from-x: 64px;
+    --__notice-from-y: 20px;
+    margin-bottom: var(--w-notice-gap-item);
+  }
+
+  &.w-notice-item--top-start {
+    --__notice-from-x: -64px;
+    --__notice-from-y: -20px;
+    margin-top: var(--w-notice-gap-item);
+  }
+
+  &.w-notice-item--bottom-start {
+    --__notice-from-x: -64px;
+    --__notice-from-y: 20px;
+    margin-bottom: var(--w-notice-gap-item);
+  }
+
+  & .w-notice-inner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--w-notice-inner-gap);
+  }
+
+  & .w-notice-icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: calc(var(--__size) * var(--w-notice-icon-margin-top-ratio));
+    color: var(--w-notice-icon-color, currentColor);
+    font-size: var(--w-notice-icon-size);
+  }
+
+  & .w-notice-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  & .w-notice-title {
+    font-weight: var(--w-notice-title-weight, 600);
+    font-size: var(--__font);
+    margin-bottom: calc(var(--__size) * var(--w-notice-title-margin-bottom-ratio));
+    color: var(--w-notice-title-color, inherit);
+  }
+
+  & .w-notice-content {
+    word-break: break-word;
+  }
+
+  & .w-notice-close {
+    top: var(--w-notice-close-top, -5px);
+    right: var(--w-notice-close-right, -5px);
+    position: absolute;
+    color: var(--w-notice-close-color, var(--w-color-font-2, #6b7280));
+  }
+
+  &.w-notice-item--info {
+    --__accent: var(--w-notice-info-color, var(--__color));
+  }
+
+  &.w-notice-item--success {
+    --__accent: var(--w-notice-success-color, var(--w-success));
+  }
+
+  &.w-notice-item--warning {
+    --__accent: var(--w-notice-warning-color, var(--w-warn));
+  }
+
+  &.w-notice-item--error {
+    --__accent: var(--w-notice-error-color, var(--w-error));
+  }
+
+  /* 进场：滑入 + 放大 + 淡入 + 去模糊 */
+  &.w-notice-transition-enter-active {
+    will-change: transform, opacity, filter;
+    transition:
+      transform var(--w-notice-enter-duration) var(--w-notice-ease-out),
+      opacity calc(var(--w-notice-enter-duration) * 0.7) var(--w-notice-ease-out),
+      filter var(--w-notice-enter-duration) var(--w-notice-ease-out);
+  }
+
+  &.w-notice-transition-enter-from {
+    transform: translate3d(var(--__notice-from-x), var(--__notice-from-y), 0)
+      scale(var(--__notice-from-scale));
+    opacity: 0;
+    filter: blur(var(--__notice-from-blur));
+  }
+
+  &.w-notice-transition-enter-to {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  /*
+   * 退场：沿进场反方向滑出 + 淡出 + 模糊，同时收拢高度
+   */
+  &.w-notice-transition-leave-active {
+    overflow: hidden;
+    pointer-events: none;
+    will-change: transform, opacity, height, filter;
+    transition:
+      transform var(--w-notice-leave-duration) var(--w-notice-ease-in),
+      opacity calc(var(--w-notice-leave-duration) * 0.8) var(--w-notice-ease-in),
+      filter calc(var(--w-notice-leave-duration) * 0.9) var(--w-notice-ease-in),
+      height var(--w-notice-leave-duration) var(--w-notice-ease-in),
+      margin-top var(--w-notice-leave-duration) var(--w-notice-ease-in),
+      margin-bottom var(--w-notice-leave-duration) var(--w-notice-ease-in),
+      padding-top var(--w-notice-leave-duration) var(--w-notice-ease-in),
+      padding-bottom var(--w-notice-leave-duration) var(--w-notice-ease-in);
+  }
+
+  &.w-notice-transition-leave-from {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  &.w-notice-transition-leave-to {
+    transform: translate3d(var(--__notice-from-x), var(--__notice-from-y), 0)
+      scale(var(--__notice-from-scale));
+    opacity: 0;
+    filter: blur(var(--__notice-from-blur));
+    height: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}