@neatui/css 4.8.0 → 4.8.1

package/components/card/card@a.scss

@@ -64,40 +64,57 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-card-tool] {
       & {
         position: relative;
+        // height: auto 精确等于内容高度，这里裁不到任何东西
         overflow: hidden;
+        // 让 height: auto 可以参与过渡，动画终点即真实内容高度
+        interpolate-size: allow-keywords;
         pointer-events: auto;
-        max-height: 20em;
+        height: auto;
         opacity: 1;
         z-index: 2;
         transition:
-          max-height 0.3s ease,
-          padding 0.3s ease,
-          margin 0.3s ease,
-          opacity 0.2s ease 0.1s;
+          height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
+          padding 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
+          margin 0.28s ease-out,
+          opacity 0.18s ease;
         background: var(--co-fore-o-lm);
         padding: 1em 1.5em;
         margin-bottom: 1px;
       }
 
+      // interpolate-size 会继承，把子元素还原成初始值，避免影响使用方自己的过渡
+      & > * {
+        interpolate-size: numeric-only;
+      }
+
       &[ui-card-tool~='hide'] {
         pointer-events: none;
         padding-top: 0 !important;
         padding-bottom: 0 !important;
         margin-bottom: 0 !important;
-        max-height: 0 !important;
+        height: 0 !important;
         opacity: 0;
         transition:
-          max-height 0.3s ease,
-          padding 0.3s ease,
-          margin 0.3s ease,
-          opacity 0.15s ease;
+          height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
+          padding 0.26s cubic-bezier(0.4, 0, 0.2, 1),
+          margin 0.26s ease,
+          opacity 0.14s ease;
       }
 
-      // 支持 interpolate-size 的浏览器直接过渡到真实高度
-      @supports (interpolate-size: allow-keywords) {
+      // 不支持 interpolate-size 的浏览器（Firefox）：高度直接开合，不做动画，同样不裁剪
+      @supports not (interpolate-size: allow-keywords) {
         & {
-          interpolate-size: allow-keywords;
-          max-height: max-content;
+          transition:
+            padding 0.28s ease-out,
+            margin 0.28s ease-out,
+            opacity 0.18s ease;
+        }
+
+        &[ui-card-tool~='hide'] {
+          transition:
+            padding 0.26s ease,
+            margin 0.26s ease,
+            opacity 0.14s ease;
         }
       }
     }

package/dist/neatui.css

@@ -21411,30 +21411,36 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
   justify-content:flex-end;
 }
 [ui-card~="@a"] [ui-card-tool]{
+  overflow:hidden;
+  position:relative;
+  interpolate-size:allow-keywords;
   background:var(--co-fore-o-lm);
+  height:auto;
   margin-bottom:1px;
-  max-height:20em;
   opacity:1;
-  overflow:hidden;
   padding:1em 1.5em;
   pointer-events:auto;
-  position:relative;
-  transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .2s ease .1s;
+  transition:height .28s cubic-bezier(.22, .61, .36, 1),padding .28s cubic-bezier(.22, .61, .36, 1),margin .28s ease-out,opacity .18s ease;
   z-index:2;
 }
+[ui-card~="@a"] [ui-card-tool]>*{
+  interpolate-size:numeric-only;
+}
 [ui-card~="@a"] [ui-card-tool][ui-card-tool~=hide]{
+  height:0 !important;
   margin-bottom:0 !important;
-  max-height:0 !important;
   opacity:0;
   padding-bottom:0 !important;
   padding-top:0 !important;
   pointer-events:none;
-  transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .15s ease;
+  transition:height .26s cubic-bezier(.4, 0, .2, 1),padding .26s cubic-bezier(.4, 0, .2, 1),margin .26s ease,opacity .14s ease;
 }
-@supports (interpolate-size:allow-keywords){
+@supports not (interpolate-size:allow-keywords){
   [ui-card~="@a"] [ui-card-tool]{
-    interpolate-size:allow-keywords;
-    max-height:max-content;
+    transition:padding .28s ease-out,margin .28s ease-out,opacity .18s ease;
+  }
+  [ui-card~="@a"] [ui-card-tool][ui-card-tool~=hide]{
+    transition:padding .26s ease,margin .26s ease,opacity .14s ease;
   }
 }
 [ui-card~="@a"] [ui-card-body]{
@@ -21699,30 +21705,36 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
   justify-content:flex-end;
 }
 [ui-cards~="@a"]>*>* [ui-card-tool]{
+  overflow:hidden;
+  position:relative;
+  interpolate-size:allow-keywords;
   background:var(--co-fore-o-lm);
+  height:auto;
   margin-bottom:1px;
-  max-height:20em;
   opacity:1;
-  overflow:hidden;
   padding:1em 1.5em;
   pointer-events:auto;
-  position:relative;
-  transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .2s ease .1s;
+  transition:height .28s cubic-bezier(.22, .61, .36, 1),padding .28s cubic-bezier(.22, .61, .36, 1),margin .28s ease-out,opacity .18s ease;
   z-index:2;
 }
+[ui-cards~="@a"]>*>* [ui-card-tool]>*{
+  interpolate-size:numeric-only;
+}
 [ui-cards~="@a"]>*>* [ui-card-tool][ui-card-tool~=hide]{
+  height:0 !important;
   margin-bottom:0 !important;
-  max-height:0 !important;
   opacity:0;
   padding-bottom:0 !important;
   padding-top:0 !important;
   pointer-events:none;
-  transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .15s ease;
+  transition:height .26s cubic-bezier(.4, 0, .2, 1),padding .26s cubic-bezier(.4, 0, .2, 1),margin .26s ease,opacity .14s ease;
 }
-@supports (interpolate-size:allow-keywords){
+@supports not (interpolate-size:allow-keywords){
   [ui-cards~="@a"]>*>* [ui-card-tool]{
-    interpolate-size:allow-keywords;
-    max-height:max-content;
+    transition:padding .28s ease-out,margin .28s ease-out,opacity .18s ease;
+  }
+  [ui-cards~="@a"]>*>* [ui-card-tool][ui-card-tool~=hide]{
+    transition:padding .26s ease,margin .26s ease,opacity .14s ease;
   }
 }
 [ui-cards~="@a"]>*>* [ui-card-body]{