@neatui/css 4.7.1 → 4.8.1

package/components/card/card@a.scss

@@ -64,30 +64,58 @@ $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: 1000px;
+        height: auto;
         opacity: 1;
         z-index: 2;
         transition:
-          all 0.2s,
-          padding 0.35s,
-          margin 0.35s;
+          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:
-          all 0.25s,
-          padding ease 0.35s,
-          margin ease 0.35s;
+          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 的浏览器（Firefox）：高度直接开合，不做动画，同样不裁剪
+      @supports not (interpolate-size: allow-keywords) {
+        & {
+          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;
+        }
       }
     }
 
@@ -103,7 +131,7 @@ $card_a_sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-card-head] {
       // margin-bottom: 2px;
       // @include theme {
-      border-bottom: 2px solid var(--co-back-o-ls);
+      border-bottom: 2px solid var(--co-line-o-ms);
       // }
     }
 

package/dist/neatui.css

@@ -21411,24 +21411,37 @@ 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:1000px;
   opacity:1;
   padding:1em 1.5em;
   pointer-events:auto;
-  position:relative;
-  transition:all .2s,padding .35s,margin .35s;
+  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:all .25s,padding .35s ease,margin .35s 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 not (interpolate-size:allow-keywords){
+  [ui-card~="@a"] [ui-card-tool]{
+    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]{
   flex-grow:1;
@@ -21437,7 +21450,7 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
   position:relative;
 }
 [ui-card~="@a"] [ui-card-head]{
-  border-bottom:2px solid var(--co-back-o-ls);
+  border-bottom:2px solid var(--co-line-o-ms);
 }
 [ui-card~="@a"] [ui-card-foot]{
   border-top:1px solid var(--co-back-o-ls);
@@ -21692,24 +21705,37 @@ 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:1000px;
   opacity:1;
   padding:1em 1.5em;
   pointer-events:auto;
-  position:relative;
-  transition:all .2s,padding .35s,margin .35s;
+  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:all .25s,padding .35s ease,margin .35s 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 not (interpolate-size:allow-keywords){
+  [ui-cards~="@a"]>*>* [ui-card-tool]{
+    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]{
   flex-grow:1;
@@ -21718,7 +21744,7 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
   position:relative;
 }
 [ui-cards~="@a"]>*>* [ui-card-head]{
-  border-bottom:2px solid var(--co-back-o-ls);
+  border-bottom:2px solid var(--co-line-o-ms);
 }
 [ui-cards~="@a"]>*>* [ui-card-foot]{
   border-top:1px solid var(--co-back-o-ls);