diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap index 632c9d9079..25f0f551c2 100644 --- a/components/drawer/__tests__/__snapshots__/demo.test.js.snap +++ b/components/drawer/__tests__/__snapshots__/demo.test.js.snap @@ -156,6 +156,69 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = ` `; +exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = ` +
+ Render in this +
+ +
+
+
+
+
+
+
+
+
+ Basic Drawer +
+
+
+

+ Some contents... +

+
+
+
+
+
+
+
+`; + exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
{ + this.setState({ + visible: true, + }); + }; + + onClose = () => { + this.setState({ + visible: false, + }); + }; + + render() { + return ( +
+ Render in this +
+ +
+ +

Some contents...

+
+
+ ); + } +} + +ReactDOM.render(, mountNode); +``` diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index e9d31d0370..e779e41a90 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -11,14 +11,14 @@ z-index: @zindex-modal; width: 0%; height: 100%; - transition: transform @animation-duration-slow @ease-base-out; + transition: transform @animation-duration-slow @ease-base-out, height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow; > * { transition: transform @animation-duration-slow @ease-base-out, box-shadow @animation-duration-slow @ease-base-out; } &-content-wrapper { - position: fixed; + position: absolute; } .@{drawer-prefix-cls}-content { width: 100%; @@ -35,6 +35,7 @@ } &.@{drawer-prefix-cls}-open { width: 100%; + transition: transform @animation-duration-slow @ease-base-out; } &.@{drawer-prefix-cls}-open.no-mask { width: 0%; @@ -75,6 +76,7 @@ } &.@{drawer-prefix-cls}-open { height: 100%; + transition: transform @animation-duration-slow @ease-base-out; } &.@{drawer-prefix-cls}-open.no-mask { height: 0%; @@ -186,7 +188,7 @@ } &-mask { - position: fixed; + position: absolute; top: 0; left: 0; width: 100%;