Fix popconfirm animation, close #484

components/popconfirm/demo/placement.md

@@ -16,45 +16,50 @@ function confirm() {
 }
 
 ReactDOM.render(<div>
-  <Popconfirm placement="leftTop" title={text} onConfirm={confirm}>
-    <Button>左上</Button>
-  </Popconfirm>
-  <Popconfirm placement="left" title={text} onConfirm={confirm}>
-    <Button>左</Button>
-  </Popconfirm>
-  <Popconfirm placement="leftBottom" title={text} onConfirm={confirm}>
-    <Button>左下</Button>
-  </Popconfirm>
-  <br/>
-  <Popconfirm placement="topLeft" title={text} onConfirm={confirm}>
-    <Button>上左</Button>
-  </Popconfirm>
-  <Popconfirm placement="top" title={text} onConfirm={confirm}>
-    <Button>上</Button>
-  </Popconfirm>
-  <Popconfirm placement="topRight" title={text} onConfirm={confirm}>
-    <Button>上右</Button>
-  </Popconfirm>
-  <br/>
-  <Popconfirm placement="bottomLeft" title={text} onConfirm={confirm}>
-    <Button>下左</Button>
-  </Popconfirm>
-  <Popconfirm placement="bottom" title={text} onConfirm={confirm}>
-    <Button>下</Button>
-  </Popconfirm>
-  <Popconfirm placement="bottomRight" title={text} onConfirm={confirm}>
-    <Button>下右</Button>
-  </Popconfirm>
-  <br/>
-  <Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
-    <Button>右上</Button>
-  </Popconfirm>
-  <Popconfirm placement="right" title={text} onConfirm={confirm}>
-    <Button>右</Button>
-  </Popconfirm>
-  <Popconfirm placement="rightBottom" title={text} onConfirm={confirm}>
-    <Button>右下</Button>
-  </Popconfirm>
+  <div style={{marginLeft: 60}}>
+    <Popconfirm placement="topLeft" title={text} onConfirm={confirm}>
+      <Button>上左</Button>
+    </Popconfirm>
+    <Popconfirm placement="top" title={text} onConfirm={confirm}>
+      <Button>上边</Button>
+    </Popconfirm>
+    <Popconfirm placement="topRight" title={text} onConfirm={confirm}>
+      <Button>上右</Button>
+    </Popconfirm>
+  </div>
+  <div style={{width: 60, float: 'left'}}>
+    <Popconfirm placement="leftTop" title={text} onConfirm={confirm}>
+      <Button>左上</Button>
+    </Popconfirm>
+    <Popconfirm placement="left" title={text} onConfirm={confirm}>
+      <Button>左边</Button>
+    </Popconfirm>
+    <Popconfirm placement="leftBottom" title={text} onConfirm={confirm}>
+      <Button>左下</Button>
+    </Popconfirm>
+  </div>
+  <div style={{width: 60, marginLeft: 270}}>
+    <Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
+      <Button>右上</Button>
+    </Popconfirm>
+    <Popconfirm placement="right" title={text} onConfirm={confirm}>
+      <Button>右边</Button>
+    </Popconfirm>
+    <Popconfirm placement="rightBottom" title={text} onConfirm={confirm}>
+      <Button>右下</Button>
+    </Popconfirm>
+  </div>
+  <div style={{marginLeft: 60, clear: 'both'}}>
+    <Popconfirm placement="bottomLeft" title={text} onConfirm={confirm}>
+      <Button>下左</Button>
+    </Popconfirm>
+    <Popconfirm placement="bottom" title={text} onConfirm={confirm}>
+      <Button>下边</Button>
+    </Popconfirm>
+    <Popconfirm placement="bottomRight" title={text} onConfirm={confirm}>
+      <Button>下右</Button>
+    </Popconfirm>
+  </div>
 </div>, document.getElementById('components-popconfirm-demo-placement'));
 ````
 

components/popconfirm/index.jsx

@@ -58,7 +58,15 @@ export default React.createClass({
       top: 'zoom-down',
       bottom: 'zoom-up',
       left: 'zoom-right',
-      right: 'zoom-left'
+      right: 'zoom-left',
+      topLeft: 'zoom-down',
+      bottomLeft: 'zoom-up',
+      leftTop: 'zoom-right',
+      rightTop: 'zoom-left',
+      topRight: 'zoom-down',
+      bottomRight: 'zoom-up',
+      leftBottom: 'zoom-right',
+      rightBottom: 'zoom-left',
     })[this.props.placement];
 
     return (