fix(h5): 修复createAnimation单位判定/translateX缺少括号bug/添加测试

fix #2749
NervJS · Apr 13, 2019 · 54b2404 · 54b2404
1 parent 4ea89b0
commit 54b2404
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/packages/taro-h5/__test__/createAnimation-test.js b/packages/taro-h5/__test__/createAnimation-test.js
@@ -0,0 +1,21 @@
+/* eslint-disable */
+import { createAnimation } from '../src/api/createAnimation'
+
+describe('createAnimation', () => {
+  it('test unit', () => {
+    const ani = createAnimation()
+    const { rules, transform } = ani
+    ani.left(10)
+    expect(rules[0]).toEqual(`left: 10px`)
+    ani.top('10')
+    expect(rules[1]).toEqual(`top: 10px`)
+    ani.right('10%')
+    expect(rules[2]).toEqual(`right: 10%`)
+    ani.translate(10, '10%')
+    expect(transform[1]).toEqual(`translate(10px, 10%)`)
+    ani.translateX('10')
+    expect(transform[2]).toEqual(`translateX(10px)`)
+    ani.translate3d('10', 10, '20%')
+    expect(transform[3]).toEqual(`translate3d(10px, 10px, 20%)`)
+  })
+})
diff --git a/packages/taro-h5/src/api/createAnimation/index.js b/packages/taro-h5/src/api/createAnimation/index.js
@@ -104,6 +104,13 @@ class Animation {
       }
     })
   }
+  transformUnit (...args) {
+    const ret = []
+    args.forEach(each => {
+      ret.push(isNaN(each) ? each : `${each}${this.unit}`)
+    })
+    return ret
+  }
   // 设置默认值
   setDefault (duration, delay, timingFunction, transformOrigin) {
     this.DEFAULT = { duration, delay, timingFunction, transformOrigin }
@@ -179,23 +186,30 @@ class Animation {
     return this
   }
   translate (x, y) {
-    this.transform.push(`translate(${x}${this.unit}, ${y}${this.unit})`)
+    [x, y] = this.transformUnit(x, y)
+    this.transform.push(`translate(${x}, ${y})`)
     return this
   }
   translate3d (x, y, z) {
-    this.transform.push(`translate3d(${x}${this.unit}, ${y}${this.unit}, ${z}${this.unit})`)
+    [x, y, z] = this.transformUnit(x, y, z)
+    this.transform.push(
+      `translate3d(${x}, ${y}, ${z})`
+    )
     return this
   }
   translateX (translate) {
-    this.transform.push(`translateX(${translate}${this.unit})`)
+    [translate] = this.transformUnit(translate)
+    this.transform.push(`translateX(${translate})`)
     return this
   }
   translateY (translate) {
-    this.transform.push(`translateY(${translate}${this.unit})`)
+    [translate] = this.transformUnit(translate)
+    this.transform.push(`translateY(${translate})`)
     return this
   }
   translateZ (translate) {
-    this.transform.push(`translateZ(${translate}${this.unit})`)
+    [translate] = this.transformUnit(translate)
+    this.transform.push(`translateZ(${translate})`)
     return this
   }
   opacity (value) {
@@ -207,27 +221,33 @@ class Animation {
     return this
   }
   width (value) {
-    this.rules.push(`width: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`width: ${value}`)
     return this
   }
   height (value) {
-    this.rules.push(`height: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`height: ${value}`)
     return this
   }
   top (value) {
-    this.rules.push(`top: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`top: ${value}`)
     return this
   }
   right (value) {
-    this.rules.push(`right: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`right: ${value}`)
     return this
   }
   bottom (value) {
-    this.rules.push(`bottom: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`bottom: ${value}`)
     return this
   }
   left (value) {
-    this.rules.push(`left: ${value}${this.unit}`)
+    [value] = this.transformUnit(value)
+    this.rules.push(`left: ${value}`)
     return this
   }
   // 关键帧载入