Bugfix issue.9862 (#10052)

* Fix issue 9862

* Update Card test snapshot

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -371,79 +371,89 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
 `;
 
 exports[`renders ./components/card/demo/loading.md correctly 1`] = `
-<div
-  class="ant-card ant-card-loading ant-card-bordered"
-  style="width:34%"
->
+<div>
   <div
-    class="ant-card-head"
+    class="ant-card ant-card-loading ant-card-bordered"
   >
     <div
-      class="ant-card-head-wrapper"
+      class="ant-card-head"
     >
       <div
-        class="ant-card-head-title"
+        class="ant-card-head-wrapper"
       >
-        Card title
+        <div
+          class="ant-card-head-title"
+        >
+          Card title
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-card-body"
-  >
     <div
-      class="ant-card-loading-content"
+      class="ant-card-body"
     >
-      <p
-        class="ant-card-loading-block"
-        style="width:94%"
-      />
-      <p>
-        <span
-          class="ant-card-loading-block"
-          style="width:28%"
-        />
-        <span
-          class="ant-card-loading-block"
-          style="width:62%"
-        />
-      </p>
-      <p>
-        <span
-          class="ant-card-loading-block"
-          style="width:22%"
-        />
-        <span
-          class="ant-card-loading-block"
-          style="width:66%"
-        />
-      </p>
-      <p>
-        <span
-          class="ant-card-loading-block"
-          style="width:56%"
-        />
-        <span
-          class="ant-card-loading-block"
-          style="width:39%"
-        />
-      </p>
-      <p>
-        <span
-          class="ant-card-loading-block"
-          style="width:21%"
-        />
-        <span
-          class="ant-card-loading-block"
-          style="width:15%"
-        />
-        <span
+      <div
+        class="ant-card-loading-content"
+      >
+        <p
           class="ant-card-loading-block"
-          style="width:40%"
+          style="width:94%"
         />
-      </p>
+        <p>
+          <span
+            class="ant-card-loading-block"
+            style="width:28%"
+          />
+          <span
+            class="ant-card-loading-block"
+            style="width:62%"
+          />
+        </p>
+        <p>
+          <span
+            class="ant-card-loading-block"
+            style="width:22%"
+          />
+          <span
+            class="ant-card-loading-block"
+            style="width:66%"
+          />
+        </p>
+        <p>
+          <span
+            class="ant-card-loading-block"
+            style="width:56%"
+          />
+          <span
+            class="ant-card-loading-block"
+            style="width:39%"
+          />
+        </p>
+        <p>
+          <span
+            class="ant-card-loading-block"
+            style="width:21%"
+          />
+          <span
+            class="ant-card-loading-block"
+            style="width:15%"
+          />
+          <span
+            class="ant-card-loading-block"
+            style="width:40%"
+          />
+        </p>
+      </div>
     </div>
   </div>
+  <button
+    class="ant-btn"
+    style="margin-top:16px"
+    type="button"
+  >
+    <span>
+      Toggle loading
+    </span>
+  </button>
 </div>
 `;
 

components/card/demo/loading.md

@@ -14,11 +14,30 @@ title:
 Shows a loading indicator while the contents of the card is being fetched.
 
 ````jsx
-import { Card } from 'antd';
+import { Card, Button } from 'antd';
+
+class LoadingCard extends React.Component {
+  state = {
+    loading: true,
+  }
+
+  handleClick = () => {
+    this.setState({ loading: !this.state.loading });
+  }
+
+  render() {
+    return (
+      <div>
+        <Card loading={this.state.loading} title="Card title">
+          Whatever content
+        </Card>
+        <Button onClick={this.handleClick} style={{ marginTop: 16 }}>Toggle loading</Button>
+      </div>
+    );
+  }
+}
 
 ReactDOM.render(
-  <Card loading title="Card title" style={{ width: '34%' }}>
-    Whatever content
-  </Card>
+  <LoadingCard />
 , mountNode);
 ````

components/card/index.tsx

@@ -41,14 +41,20 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   defaultActiveTabKey?: string;
 }
 
-export default class Card extends React.Component<CardProps, {}> {
+export interface CardState {
+  widerPadding: boolean;
+}
+
+export default class Card extends React.Component<CardProps, CardState> {
   static Grid: typeof Grid = Grid;
   static Meta: typeof Meta = Meta;
-  resizeEvent: any;
-  updateWiderPaddingCalled: boolean;
+
   state = {
     widerPadding: false,
   };
+
+  private resizeEvent: any;
+  private updateWiderPaddingCalled: boolean = false;
   private container: HTMLDivElement;
   componentDidMount() {
     this.updateWiderPadding();

components/card/style/index.less

@@ -221,16 +221,20 @@
 
   &-loading &-body {
     user-select: none;
-    padding: 0;
   }
 
   &-loading-content {
-    padding: @card-padding-base;
+    padding: 0;
+    animation: loading-entering .3s;
     p {
       margin: 0;
     }
   }
 
+  &-wider-padding &-loading-content {
+    animation: wider-loading-entering .3s;
+  }
+
   &-loading-block {
     display: inline-block;
     margin: 5px 2% 0 0;
@@ -251,3 +255,21 @@
 		background-position: 100% 50%;
 	}
 }
+
+@keyframes loading-entering {
+  from {
+    padding: @card-padding-base;
+  }
+  to {
+    padding: 0;
+  }
+}
+
+@keyframes wider-loading-entering {
+  from {
+    padding: @card-padding-base @card-padding-wider;
+  }
+  to {
+    padding: 0;
+  }
+}