feat(layout): 新增falot-layout动画效果

jd-opensource · Aug 9, 2018 · 00cbf69 · 00cbf69
1 parent c4ce79a
commit 00cbf69
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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);
+  }
+}