新增属性折叠动画。

ShadowEditor.Web/src/editor2/component/ReflectorComponent.jsx

@@ -21,7 +21,7 @@ class ReflectorComponent extends React.Component {
 
         this.state = {
             show: false,
-            expanded: true,
+            expanded: false,
 
             reflect: false,
             showColor: false,

ShadowEditor.Web/src/editor2/component/physics/PhysicsTypeComponent.jsx

@@ -17,7 +17,7 @@ class PhysicsTypeComponent extends React.Component {
 
         this.state = {
             show: false,
-            expanded: true,
+            expanded: false,
             physicsEnabled: false,
             type: 'rigidBody',
         };

ShadowEditor.Web/src/ui/property/PropertyGroup.jsx

@@ -10,6 +10,8 @@ class PropertyGroup extends React.Component {
     constructor(props) {
         super(props);
 
+        this.contentRef = React.createRef();
+
         this.handleExpand = this.handleExpand.bind(this, props.onExpand);
     }
 
@@ -23,7 +25,7 @@ class PropertyGroup extends React.Component {
                 </div>
                 <div className={'title'}>{title}</div>
             </div>
-            <div className={classNames('content', !expanded && 'collapsed')}>
+            <div className={classNames('content', !expanded && 'collapsed')} ref={this.contentRef}>
                 {React.Children.map(children, (n, i) => {
                     if (n.props.show === false) {
                         return null;
@@ -44,6 +46,18 @@ class PropertyGroup extends React.Component {
         </div>;
     }
 
+    componentDidMount() {
+        let content = this.contentRef.current;
+        let height = 0;
+
+        for (let i = 0; i < content.children.length; i++) {
+            let child = content.children[i];
+            height += child.offsetHeight; // offsetHeight包含下边框
+        }
+
+        content.style.height = `${height}px`;
+    }
+
     handleExpand(onExpand, event) {
         const expanded = event.target.getAttribute('expanded') === 'true';
         onExpand && onExpand(!expanded, event);

ShadowEditor.Web/src/ui/property/css/PropertyGroup.css

@@ -57,7 +57,7 @@
 }
 
 .PropertyGroup>.content.collapsed {
-    height: 0;
+    height: 0 !important;
 }
 
 .PropertyGroup>.content>.property {