feat(popup): 修改animation和contentAlign属性名；添加l-panel-class

Author: dpp050700

dist/popup/index.js

@@ -1 +1 @@
-{"component":true,"usingComponents":{}}
+{"component":true,"usingComponents":{"l-transition":"../transition/index"}}

dist/popup/index.json

@@ -1,9 +1,15 @@
 
-<view class='container-popup {{ show ? "popup-show" : "" }} {{ "l-popup-" + contentAlign }}' style="z-index:{{zIndex}};" catchtouchmove="doNothingMove">
-  <view class="container-bg l-bg-class"></view>
-  <view wx:if="{{show}}" class="popup-content {{ show ? contentAlign : ''}} popup-fade-{{contentAlign}}-active-{{animation ? status:''}}" catchtap="onPupopTap">
-    <view catchtap="doNothingTap">
-      <slot></slot>
+  <view class='l-class container-popup {{ show ? "popup-show" : "" }} {{contentAlign ? contentAlign : direction}}' style="z-index:{{zIndex}};">
+    <view class="container-bg l-bg-class" style="opacity: {{opacity}}" catchtap="onPupopTap" catchtouchmove="doNothingMove"></view>
+    <l-transition wx:if="{{animation && transition}}" show="{{ show }}" class="popup-content" name="" duration="300" l-enter-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-class"}}' l-enter-active-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-active-class"}}' l-enter-to-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-to-class"}}' l-leave-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-class"}}' l-leave-active-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-active-class"}}' l-leave-to-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-to-class"}}'>
+        <view class='{{"popup-content-"+ (contentAlign ? contentAlign : direction)}} l-panel-class'>
+          <slot></slot>
+        </view>
+    </l-transition>
+    <view wx:if="{{!(animation && transition) && show}}" class="popup-content" style="z-index:100">
+        <view class='test {{"popup-content-"+ (contentAlign ? contentAlign : direction)}} l-panel-class'>
+            <slot></slot>
+        </view>
     </view>
   </view>
-</view>
+

dist/popup/index.wxml

@@ -1 +1 @@
-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block}.container-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content-left,.popup-content-right{height:100%}.popup-content-bottom,.popup-content-top{width:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.center-lin-enter-class,.center-lin-leave-to-class{transform:scale(.8)}.center-lin-enter-active-class,.center-lin-leave-active-class{transform:scale(1.2)}.center-lin-enter-to-class,.center-lin-leave-class{transform:scale(1)}.left-lin-enter-class,.left-lin-leave-to-class{transform:translate3d(-100%,0,0);height:100%}.left-lin-enter-active-class,.left-lin-leave-active-class{transform:translate3d(-100%,0,0);height:100%}.left-lin-enter-to-class,.left-lin-leave-class{transform:translate3d(0,0,0);height:100%}.right-lin-enter-class,.right-lin-leave-to-class{transform:translate3d(100%,0,0);height:100%}.right-lin-enter-active-class,.right-lin-leave-active-class{transform:translate3d(100%,0,0);height:100%}.right-lin-enter-to-class,.right-lin-leave-class{transform:translate3d(0,0,0);height:100%}.top-lin-enter-class,.top-lin-leave-to-class{transform:translate3d(0,-100%,0);width:100%}.top-lin-enter-active-class,.top-lin-leave-active-class{transform:translate3d(0,-100%,0);width:100%}.top-lin-enter-to-class,.top-lin-leave-class{transform:translate3d(0,0,0);width:100%}.bottom-lin-enter-class,.bottom-lin-leave-to-class{transform:translate3d(0,100%,0);width:100%}.bottom-lin-enter-active-class,.bottom-lin-leave-active-class{transform:translate3d(0,100%,0);width:100%}.bottom-lin-enter-to-class,.bottom-lin-leave-class{transform:translate3d(0,0,0);width:100%}

dist/popup/index.wxss

@@ -6,20 +6,29 @@ Component({
    * 组件的属性列表
    */
   behaviors: [zIndex, validator],
-  externalClasses: ['l-bg-class'],
+  externalClasses: ['l-bg-class', 'l-panel-class', '1-class'],
   properties: {
     // 显示与隐藏
     show: {
       type: Boolean,
       value: false
     },
-    // 动画效果的显示和隐藏
+    // 动画效果的显示和隐藏 --- 该属性更名为 transition
     animation: {
       type: Boolean,
       value: true
     },
-    // slot的位置
+    transition: {
+      type: Boolean,
+      value: true
+    },
+    // slot的位置 --- 该属性更名为 direction
     contentAlign: {
+      type: String,
+      value: '',
+      options: ['', 'top', 'right', 'left', 'bottom', 'center']
+    },
+    direction: {
       type: String,
       value: 'center',
       options: ['top', 'right', 'left', 'bottom', 'center']
@@ -28,6 +37,10 @@ Component({
     locked: {
       type: Boolean,
       value: false
+    },
+    opacity: {
+      type: Number,
+      value: 0.4
     }
   },
 

examples/dist/popup/index.js

@@ -1,4 +1,7 @@
+
 {
   "component": true,
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "l-transition":"../transition/index"
+  }
+}

examples/dist/popup/index.json

@@ -1,11 +1,27 @@
 <!-- popup.wxml -->
-<view class='container-popup {{ show ? "popup-show" : "" }}   {{ "l-popup-" + contentAlign }}  ' style="z-index:{{zIndex}}; " catchtouchmove="doNothingMove">
-  <view class='container-bg l-bg-class'></view>
-  <view
-    wx:if="{{show}}"
-    class="popup-content {{ show ? contentAlign : ''}}   popup-fade-{{contentAlign}}-active-{{animation ? status:''}}" catchtap='onPupopTap'>
-    <view catchtap="doNothingTap">
-      <slot></slot>
+  <view class='l-class container-popup {{ show ? "popup-show" : "" }} {{contentAlign ? contentAlign : direction}}' style="z-index:{{zIndex}};" >
+    <view class='container-bg l-bg-class'  style="opacity: {{opacity}}" catchtap='onPupopTap' catchtouchmove="doNothingMove"></view>
+    <l-transition
+        wx:if="{{animation && transition}}"
+        show="{{ show }}"
+        class="popup-content"
+        name=""
+        duration="300"
+        l-enter-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-class"}}'
+        l-enter-active-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-active-class"}}'
+        l-enter-to-class='{{(contentAlign ? contentAlign : direction) + "-lin-enter-to-class"}}'
+        l-leave-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-class"}}'
+        l-leave-active-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-active-class"}}'
+        l-leave-to-class='{{(contentAlign ? contentAlign : direction) + "-lin-leave-to-class"}}'
+    >
+        <view class='{{"popup-content-"+ (contentAlign ? contentAlign : direction)}} l-panel-class' >
+          <slot></slot>
+        </view>
+    </l-transition>
+    <view wx:if="{{!(animation && transition) && show}}" class="popup-content" style="z-index:100">
+        <view class='test {{"popup-content-"+ (contentAlign ? contentAlign : direction)}} l-panel-class'>
+            <slot></slot>
+        </view>
     </view>
   </view>
-</view>
+

examples/dist/popup/index.wxml

@@ -1 +1 @@
-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block}.container-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content-left,.popup-content-right{height:100%}.popup-content-bottom,.popup-content-top{width:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.center-lin-enter-class,.center-lin-leave-to-class{transform:scale(.8)}.center-lin-enter-active-class,.center-lin-leave-active-class{transform:scale(1.2)}.center-lin-enter-to-class,.center-lin-leave-class{transform:scale(1)}.left-lin-enter-class,.left-lin-leave-to-class{transform:translate3d(-100%,0,0);height:100%}.left-lin-enter-active-class,.left-lin-leave-active-class{transform:translate3d(-100%,0,0);height:100%}.left-lin-enter-to-class,.left-lin-leave-class{transform:translate3d(0,0,0);height:100%}.right-lin-enter-class,.right-lin-leave-to-class{transform:translate3d(100%,0,0);height:100%}.right-lin-enter-active-class,.right-lin-leave-active-class{transform:translate3d(100%,0,0);height:100%}.right-lin-enter-to-class,.right-lin-leave-class{transform:translate3d(0,0,0);height:100%}.top-lin-enter-class,.top-lin-leave-to-class{transform:translate3d(0,-100%,0);width:100%}.top-lin-enter-active-class,.top-lin-leave-active-class{transform:translate3d(0,-100%,0);width:100%}.top-lin-enter-to-class,.top-lin-leave-class{transform:translate3d(0,0,0);width:100%}.bottom-lin-enter-class,.bottom-lin-leave-to-class{transform:translate3d(0,100%,0);width:100%}.bottom-lin-enter-active-class,.bottom-lin-leave-active-class{transform:translate3d(0,100%,0);width:100%}.bottom-lin-enter-to-class,.bottom-lin-leave-class{transform:translate3d(0,0,0);width:100%}

examples/dist/popup/index.wxss

@@ -6,20 +6,29 @@ Component({
    * 组件的属性列表
    */
   behaviors: [zIndex, validator],
-  externalClasses: ['l-bg-class'],
+  externalClasses: ['l-bg-class', 'l-panel-class', '1-class'],
   properties: {
     // 显示与隐藏
     show: {
       type: Boolean,
       value: false
     },
-    // 动画效果的显示和隐藏
+    // 动画效果的显示和隐藏 --- 该属性更名为 transition
     animation: {
       type: Boolean,
       value: true
     },
-    // slot的位置
+    transition: {
+      type: Boolean,
+      value: true
+    },
+    // slot的位置 --- 该属性更名为 direction
     contentAlign: {
+      type: String,
+      value: '',
+      options: ['', 'top', 'right', 'left', 'bottom', 'center']
+    },
+    direction: {
       type: String,
       value: 'center',
       options: ['top', 'right', 'left', 'bottom', 'center']
@@ -28,6 +37,10 @@ Component({
     locked: {
       type: Boolean,
       value: false
+    },
+    opacity: {
+      type: Number,
+      value: 0.4
     }
   },
 

src/popup/index.js

@@ -1,4 +1,7 @@
+
 {
   "component": true,
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "l-transition":"../transition/index"
+  }
+}