From dab9c3f6012fa96e83b4b0ffd449672141be86d8 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Wed, 11 Apr 2018 22:06:53 +0800
Subject: [PATCH] update popper animation

---
 examples/routers/dropdown.vue      | 362 +++++++++++++++++++++++++++--
 examples/routers/poptip.vue        |   2 +-
 src/components/base/popper.js      |   2 +-
 src/components/select/dropdown.vue |  11 +-
 4 files changed, 359 insertions(+), 18 deletions(-)

diff --git a/examples/routers/dropdown.vue b/examples/routers/dropdown.vue
index 01e538bb..f9557b4f 100644
--- a/examples/routers/dropdown.vue
+++ b/examples/routers/dropdown.vue
@@ -1,17 +1,353 @@
 <template>
-    <Dropdown trigger="click" style="margin-left: 20px">
-        <a href="javascript:void(0)">
-            click 触发
-            <Icon type="arrow-down-b"></Icon>
-        </a>
-        <DropdownMenu slot="list">
-            <DropdownItem>驴打滚</DropdownItem>
-            <DropdownItem>炸酱面</DropdownItem>
-            <DropdownItem>豆汁儿</DropdownItem>
-            <DropdownItem>冰糖葫芦</DropdownItem>
-            <DropdownItem>北京烤鸭</DropdownItem>
-        </DropdownMenu>
-    </Dropdown>
+    <div>
+        <div>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
+                <a href="javascript:void(0)">
+                    right-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
+                <a href="javascript:void(0)">
+                    right-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
+                <a href="javascript:void(0)">
+                    bottom-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
+                <a href="javascript:void(0)">
+                    bottom-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
+                <a href="javascript:void(0)">
+                    top-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
+                <a href="javascript:void(0)">
+                    top-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
+                <a href="javascript:void(0)">
+                    left-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
+                <a href="javascript:void(0)">
+                    left-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
+                <a href="javascript:void(0)">
+                    top
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
+                <a href="javascript:void(0)">
+                    bottom
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
+                <a href="javascript:void(0)">
+                    left
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
+                <a href="javascript:void(0)">
+                    right
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+        <br><br><br><br>
+        <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
+                <a href="javascript:void(0)">
+                    right-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
+                <a href="javascript:void(0)">
+                    right-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
+                <a href="javascript:void(0)">
+                    bottom-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
+                <a href="javascript:void(0)">
+                    bottom-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
+                <a href="javascript:void(0)">
+                    top-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
+                <a href="javascript:void(0)">
+                    top-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
+                <a href="javascript:void(0)">
+                    left-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
+                <a href="javascript:void(0)">
+                    left-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
+                <a href="javascript:void(0)">
+                    top
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
+                <a href="javascript:void(0)">
+                    bottom
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
+                <a href="javascript:void(0)">
+                    left
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
+                <a href="javascript:void(0)">
+                    right
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+    </div>
 </template>
 <script>
     export default {
diff --git a/examples/routers/poptip.vue b/examples/routers/poptip.vue
index 3ce19f2c..a956f34c 100644
--- a/examples/routers/poptip.vue
+++ b/examples/routers/poptip.vue
@@ -2,7 +2,7 @@
     <div style="margin: 200px">
         <Tabs value="name1">
             <TabPane label="标签一" name="name1">
-                <div style="width: 200px;height:300px">
+                <div style="width: 200px;height:300px;overflow: auto;">
                     <Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
                         <Button id="aaa">左边</Button>
                     </Poptip>
diff --git a/src/components/base/popper.js b/src/components/base/popper.js
index 5b5d4e4b..a01d6120 100644
--- a/src/components/base/popper.js
+++ b/src/components/base/popper.js
@@ -34,7 +34,7 @@ export default {
                             gpuAcceleration: false,
                         },
                         preventOverflow :{
-                            boundariesElement: 'body'
+                            boundariesElement: 'viewport'
                         }
                     }
                 };
diff --git a/src/components/select/dropdown.vue b/src/components/select/dropdown.vue
index 1d9abc12..cb9b18d6 100644
--- a/src/components/select/dropdown.vue
+++ b/src/components/select/dropdown.vue
@@ -49,7 +49,7 @@
                                     gpuAcceleration: false
                                 },
                                 preventOverflow :{
-                                    boundariesElement: 'body'
+                                    boundariesElement: 'viewport'
                                 }
                             },
                             onCreate:()=>{
@@ -79,8 +79,13 @@
                 }
             },
             resetTransformOrigin() {
-                let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
-                this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
+                let x_placement = this.popper.popper.getAttribute('x-placement');
+                let placementStart = x_placement.split('-')[0];
+                let placementEnd = x_placement.split('-')[1];
+                const leftOrRight = x_placement === 'left' || x_placement === 'right';
+                if(!leftOrRight){
+                    this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
+                }
             }
         },
         created () {