Sfoglia il codice sorgente

fix: fix new collapsible collapseHeight

代强 3 anni fa
parent
commit
cf091e52d8

+ 1 - 1
packages/semi-foundation/collapsible/animation.scss

@@ -1,5 +1,5 @@
 $transition_duration-collapsible-height: 250ms;//折叠-高度-动画持续时间
-$transition_function-collapsible-height: var(--semi-transition_function-easeIn);//折叠-高度-过渡曲线
+$transition_function-collapsible-height: cubic-bezier(0.25,0.1,0.25,1);//折叠-高度-过渡曲线
 $transition_delay-collapsible-height: var(--semi-transition_delay-fastest);//折叠-高度-延迟时间
 
 $transition_duration-collapsible-opacity: 250ms;//折叠-透明度-动画持续时间

+ 3 - 3
packages/semi-ui/collapsible/index.tsx

@@ -173,8 +173,8 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
     render() {
         const wrapperStyle: React.CSSProperties = {
             overflow: 'hidden',
-            height: this.props.isOpen ? (this.props.collapseHeight || this.state.domHeight) : 0,
-            opacity: (this.props.isOpen || !this.props.fade) ? 1 : 0,
+            height: this.props.isOpen ? this.state.domHeight : this.props.collapseHeight,
+            opacity: (this.props.isOpen || !this.props.fade || this.props.collapseHeight!==0) ? 1 : 0,
             transitionDuration: `${this.props.motion && this.state.isTransitioning ? this.props.duration : 0}ms`,
             ...this.props.style
         };
@@ -194,7 +194,7 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
                 id={this.props.id}
             >
                 {
-                    (this.props.keepDOM || this.state.visible || this.props.isOpen) && this.props.children
+                    (this.props.keepDOM || this.props.collapseHeight!==0 || this.state.visible || this.props.isOpen) && this.props.children
                 }
             </div>
         </div>;