添加约车和报修的详情展开动画

src/containers/PublicCar/components/PublicCarItem.js

@@ -43,7 +43,12 @@ class PublicCarItem extends Component {
             <img src={titleIcon} alt="" />
           </i>
         </div>
-        <div className={styles.content} onClick={this.toggleDetail}>
+        <div
+          className={`${styles.content} ${
+            showDetail ? styles.showDetailContent : ''
+          }`}
+          onClick={this.toggleDetail}
+        >
           {data.dealResult === 1 ? (
             <div className={styles.dealing} onClick={this.dealHandle}>
               处理中
@@ -132,8 +137,8 @@ class PublicCarItem extends Component {
                     {data.dealResult === 1
                       ? '待处理后显示'
                       : data.carPlate
-                        ? data.carPlate
-                        : '无'}
+                      ? data.carPlate
+                      : '无'}
                   </div>
                 </div>,
                 data.dealResult === 3 ? (

src/containers/PublicCar/components/style.css

@@ -20,6 +20,10 @@
 }
 .content {
   composes: content from '../../Repair/components/style.css';
+  max-height: 250px;
+}
+.showDetailContent {
+  max-height: 1000px;
 }
 .dealing {
   composes: dealing from '../../Repair/components/style.css';

src/containers/Repair/components/RepairItem.js

@@ -44,7 +44,12 @@ class RepairItem extends Component {
             <img src={titleIcon} alt="" />
           </i>
         </div>
-        <div className={styles.content} onClick={this.toggleDetail}>
+        <div
+          className={`${styles.content} ${
+            showDetail ? styles.showDetailContent : ''
+          }`}
+          onClick={this.toggleDetail}
+        >
           {data.dealState === 1 ? (
             <div className={styles.dealing} onClick={this.dealHandle}>
               处理中
@@ -86,7 +91,10 @@ class RepairItem extends Component {
                     </div>
                   </div>
                 </div>,
-                <div key="uploadImg" className={`${styles.listLine} ${styles.listLineImg}`}>
+                <div
+                  key="uploadImg"
+                  className={`${styles.listLine} ${styles.listLineImg}`}
+                >
                   {imgList[0] &&
                     imgList.map((item, idx) => (
                       <div

src/containers/Repair/components/style.css

@@ -32,6 +32,11 @@
   flex: 1;
   padding: 30px 12px;
   overflow: hidden;
+  transition: all .5s ease-in;
+  max-height: 210px;
+}
+.showDetailContent {
+  max-height: 1000px;
 }
 .dealing {
   position: absolute;