KERNEL-12148 feat: drawer暂时改用left,right实现

因为transform对下拉框影响到问题还未解决,会导致drawer里面的下拉框都无法弹出

src/base/layer/layer.drawer.js

@@ -154,22 +154,22 @@ BI.Drawer = BI.inherit(BI.Widget, {
             switch (o.placement) {
                 case "right":
                     self.element.css({
-                        transform: "translateX(-" + size.width + "px)"
+                        left: "calc(100% - " + size.width + "px)"
                     });
                     break;
                 case "left":
                     self.element.css({
-                        transform: "translateX(" + size.width + "px)"
+                        right: "calc(100% - " + size.width + "px)"
                     });
                     break;
                 case "top":
                     self.element.css({
-                        transform: "translateY(" + size.height + "px)"
+                        bottom: "calc(100% - " + size.height + "px)"
                     });
                     break;
                 case "bottom":
                     self.element.css({
-                        transform: "translateY(-" + size.height + "px)"
+                        top: "calc(100% - " + size.height + "px)"
                     });
                     break;
             }
@@ -180,17 +180,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
     hide: function (callback) {
         var self = this, o = this.options;
         requestAnimationFrame(function () {
+            var size = self._getSuitableSize();
             switch (o.placement) {
                 case "right":
+                    self.element.css({
+                        left: "100%"
+                    });
+                    break;
                 case "left":
                     self.element.css({
-                        transform: "translateX(0px)"
+                        right: "100%"
                     });
                     break;
                 case "top":
+                    self.element.css({
+                        bottom: "100%"
+                    });
+                    break;
                 case "bottom":
                     self.element.css({
-                        transform: "translateY(0px)"
+                        top: "100%"
                     });
                     break;
             }

src/less/base/view/drawer.less

@@ -2,5 +2,5 @@
 
 .bi-drawer {
   .box-shadows(-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008);
-  .transitions(transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
+  .transitions(inset .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
 }