fix(loading): 使用 css 动画

close #81

Author: Tidyzq

src/loading/loading.less

@@ -3,6 +3,15 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
+
+  &__hide {
+    height: 0 !important;
+    display: none;
+  }
+
+  &__animated&__hide {
+    display: flex;
+  }
 }
 
 .loading {

src/loading/loading.ts

@@ -10,17 +10,11 @@ Component({
         show: {
             // 默认显示出来
             type: Boolean,
-            value: true,
-            observer(newValue) {
-                this._computedStyle(newValue, this.data.animated)
-            }
+            value: true
         },
         animated: {
             type: Boolean,
-            value: false,
-            observer(newValue) {
-                this._computedStyle(this.data.show, newValue)
-            }
+            value: false
         },
         duration: {
             // 过渡动画时间
@@ -36,48 +30,5 @@ Component({
             type: String,
             value: '加载中'
         }
-    },
-    data: {
-        animationData: {},
-        animationInstance: {},
-        displayStyle: 'none'
-    },
-    methods: {
-        _computedStyle(show, animated) {
-            if (!show) {
-                if (!animated) {
-                    this.setData({
-                        displayStyle: 'none'
-                    })
-                } else {
-                    this._startAnimation()
-                }
-            } else {
-                this.setData({
-                    displayStyle: ''
-                })
-            }
-        },
-        _startAnimation() {
-            setTimeout(() => {
-                const data: any = this.data
-                const animation = data.animationInstance
-                animation.height(0).step()
-                this.setData({
-                    animationData: animation.export()
-                })
-            }, 0)
-        }
-    },
-    lifetimes: {
-        attached() {
-            const data: any = this.data
-            const animationInstance = wx.createAnimation({
-                duration: data.duration,
-                timingFunction: 'ease'
-            })
-            this.setData({ animationInstance })
-            this._computedStyle(this.data.show, this.data.animated)
-        }
     }
 })

src/loading/loading.wxml

@@ -1,4 +1,4 @@
-<view style="display:{{displayStyle}};" class="wx_loading_view {{extClass}}" animation="{{animationData}}" id="wx_loading_view">
+<view class="wx_loading_view {{animated ? 'wx_loading_view__animated' : ''}} {{!show ? 'wx_loading_view__hide' : ''}} {{extClass}}" style="{{animated ? 'transition: height ' + duration + 'ms ease;' : ''}}" id="wx_loading_view">
     <view wx:if="{{type==='dot-white'}}" class="loading wx_dot_loading wx_dot_loading_white">
     </view>
     <view wx:elif="{{type==='dot-gray'}}" class="loading wx_dot_loading"></view>