feat: divide cssTransform into cssTransform & stopCssTransform

src/cssTransform.ts

@@ -1,30 +1,20 @@
-interface CssTransform {
-  (el: HTMLElement, transformRule: string, transitionRule: string): void,
-  /**
-   * 停止 CSS 变换。
-   *
-   * @param el 要停止变换的元素
-   */
-  stop(el: HTMLElement): void
-}
-
 /**
  * CSS 变换。
  *
  * @param el 要变换的元素
  * @param transformRule 变换规则
  * @param transitionRule 过渡规则
  */
-const cssTransform: CssTransform = (el: HTMLElement, transformRule: string, transitionRule: string): void => {
-  el.style.webkitTransform = transformRule
-  el.style.transform = transformRule
-  el.style.webkitTransition = `-webkit-transform ${transitionRule}`
+export default function cssTransform(el: HTMLElement, transformRule: string, transitionRule: string): void {
+  el.style.transform
+    = (el.style as any).msTransform
+    = (el.style as any).OTransform
+    = (el.style as any).MozTransform
+    = (el.style as any).webkitTransform
+    = transformRule;
+  (el.style as any).webkitTransition = `-webkit-transform ${transitionRule}`;
+  (el.style as any).mozTransition = `-moz-transform ${transitionRule}`;
+  (el.style as any).oTransition = `-o-transform ${transitionRule}`;
+  (el.style as any).msTransition = `-ms-transform ${transitionRule}`
   el.style.transition = `transform ${transitionRule}`
 }
-
-cssTransform.stop = (el: HTMLElement): void => {
-  el.style.webkitTransition = 'none'
-  el.style.transition = 'none'
-}
-
-export default cssTransform

src/index.ts

@@ -62,6 +62,7 @@ export { default as sample } from './sample'
 export { default as set } from './set'
 export { default as shuffle } from './shuffle'
 export { default as startsWith } from './startsWith'
+export { default as stopCssTransform } from './stopCssTransform'
 export { default as stopEventPropagation } from './stopEventPropagation'
 export { default as storage } from './storage'
 export { default as supportPassiveEventListener } from './supportPassiveEventListener'

src/stopCssTransform.ts

@@ -0,0 +1,13 @@
+/**
+ * 停止 CSS 变换。
+ *
+ * @param el 要停止变换的元素
+ */
+export default function stopCssTransform(el: HTMLElement): void {
+  el.style.transition
+    = (el.style as any).msTransition
+    = (el.style as any).oTransition
+    = (el.style as any).mozTransition
+    = (el.style as any).webkitTransition
+    = 'none'
+}

test/index.test.ts

@@ -140,9 +140,6 @@ describe('base64', () => {
   })
   test('decode', () => {
     data.forEach(([str, encodedStr]) => {
-      if (str === 'v') {
-        console.log(str, vtils.base64Decode(encodedStr).length, String(str).length)
-      }
       expect(vtils.base64Decode(encodedStr)).toBe(String(str))
     })
   })
@@ -541,8 +538,8 @@ describe('cssTransform', () => {
     expect(el.style.transform).toBe('translateX(100px)')
     expect(el.style.transition).toBe('transform .3s ease')
   })
-  test('cssTransform.stop', () => {
-    vtils.cssTransform.stop(el)
+  test('stopCssTransform', () => {
+    vtils.stopCssTransform(el)
     expect(el.style.transition).toBe('none')
   })
 })