From 00cbf6933a161983a89963aaba696124150823e1 Mon Sep 17 00:00:00 2001
From: hejiasheng <szhejason@gmail.com>
Date: Thu, 9 Aug 2018 12:50:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=96=B0=E5=A2=9Efalot-layout?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/float-layout/index.js   | 12 +++++++++---
 src/components/float-layout/index.scss | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js
index ea6a27882..c5a1ccd2d 100644
--- a/src/components/float-layout/index.js
+++ b/src/components/float-layout/index.js
@@ -36,8 +36,14 @@ export default class AtFloatLayout extends Taro.Component {
     const { isOpened } = this.state
     const { title } = this.props
 
-    return isOpened ? (
-      <View className='at-float-layout'>
+    const rootClassNames = ['at-float-layout']
+
+    if (isOpened) {
+      rootClassNames.push('at-float-layout--active')
+    }
+
+    return (
+      <View className={rootClassNames}>
         <View onClick={this.close} className='at-float-layout__overlay' />
         <View className='at-float-layout__container layout'>
           <View className='layout-header'>
@@ -49,7 +55,7 @@ export default class AtFloatLayout extends Taro.Component {
           <View className='layout-body'>{this.props.children}</View>
         </View>
       </View>
-    ) : null
+    )
   }
 }
 
diff --git a/src/components/float-layout/index.scss b/src/components/float-layout/index.scss
index 9736686e8..3d3bf6173 100644
--- a/src/components/float-layout/index.scss
+++ b/src/components/float-layout/index.scss
@@ -7,9 +7,14 @@
   height: 100%;
   top: 0;
   left: 0;
+  visibility: hidden;
+  transition: visibility 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
 
   &__overlay {
     @include overlay;
+
+    opacity: 0;
+    transition: opacity 150ms ease-in;
   }
 
   &__container {
@@ -19,6 +24,8 @@
     background-color: white;
     min-height: 600px;
     max-height: 950px;
+    transform: translate3d(0, 100%, 0);
+    transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
   }
 }
 
@@ -49,3 +56,15 @@
     padding: 30px 20px 0 20px;
   }
 }
+
+.at-float-layout--active {
+  visibility: visible;
+
+  .at-float-layout__overlay {
+    opacity: 1;
+  }
+
+  .at-float-layout__container {
+    transform: translate3d(0, 0, 0);
+  }
+}