feat: add cssTransform

src/cssTransform.ts

@@ -0,0 +1,27 @@
+/**
+ * CSS 变换。
+ *
+ * @param el 要变换的元素
+ * @param transformRule 变换规则
+ * @param transitionRule 过渡规则
+ */
+function cssTransform(el: HTMLElement, transformRule: string, transitionRule: string): void {
+  el.style.webkitTransform = transformRule
+  el.style.transform = transformRule
+  el.style.webkitTransition = `-webkit-transform ${transitionRule}`
+  el.style.transition = `transform ${transitionRule}`
+}
+
+/**
+ * 停止 CSS 变换。
+ *
+ * @param el 要停止变换的元素
+ */
+function stop(el: HTMLElement): void {
+  el.style.webkitTransition = 'none'
+  el.style.transition = 'none'
+}
+
+cssTransform.stop = stop
+
+export default cssTransform

src/index.ts

@@ -5,6 +5,7 @@ export { default as base64UrlEncode } from './base64UrlEncode'
 export { default as bindEvent } from './bindEvent'
 export { default as castArray } from './castArray'
 export { default as clamp } from './clamp'
+export { default as cssTransform } from './cssTransform'
 export { default as Disposer } from './Disposer'
 export { default as forOwn } from './forOwn'
 export { default as getType } from './getType'
@@ -26,7 +27,7 @@ export { default as isRegExp } from './isRegExp'
 export { default as isString } from './isString'
 export { default as isUndefined } from './isUndefined'
 export { default as noop } from './noop'
-export { default as parseCSSValue } from './parseCSSValue'
+export { default as parseCssValue } from './parseCssValue'
 export { default as reduce } from './reduce'
 export { default as repeat } from './repeat'
 export { default as supportPassiveEventListener } from './supportPassiveEventListener'

test/index.test.ts

@@ -458,53 +458,53 @@ describe('supportPassiveEventListener', () => {
   })
 })
 
-describe('parseCSSValue', () => {
+describe('parseCssValue', () => {
   test('数字', () => {
-    expect(vtils.parseCSSValue(12)).toEqual({
+    expect(vtils.parseCssValue(12)).toEqual({
       value: 12,
       unit: 'px'
     })
-    expect(vtils.parseCSSValue(-4)).toEqual({
+    expect(vtils.parseCssValue(-4)).toEqual({
       value: -4,
       unit: 'px'
     })
-    expect(vtils.parseCSSValue('12')).toEqual({
+    expect(vtils.parseCssValue('12')).toEqual({
       value: 12,
       unit: 'px'
     })
-    expect(vtils.parseCSSValue('-4')).toEqual({
+    expect(vtils.parseCssValue('-4')).toEqual({
       value: -4,
       unit: 'px'
     })
   })
   test('CSS 值', () => {
-    expect(vtils.parseCSSValue('12px')).toEqual({
+    expect(vtils.parseCssValue('12px')).toEqual({
       value: 12,
       unit: 'px'
     })
-    expect(vtils.parseCSSValue('-4px')).toEqual({
+    expect(vtils.parseCssValue('-4px')).toEqual({
       value: -4,
       unit: 'px'
     })
-    expect(vtils.parseCSSValue('10%')).toEqual({
+    expect(vtils.parseCssValue('10%')).toEqual({
       value: 10,
       unit: '%'
     })
-    expect(vtils.parseCSSValue('2.5em')).toEqual({
+    expect(vtils.parseCssValue('2.5em')).toEqual({
       value: 2.5,
       unit: 'em'
     })
-    expect(vtils.parseCSSValue('.399999rem')).toEqual({
+    expect(vtils.parseCssValue('.399999rem')).toEqual({
       value: .399999,
       unit: 'rem'
     })
   })
   test('默认单位', () => {
-    expect(vtils.parseCSSValue(12, 'em')).toEqual({
+    expect(vtils.parseCssValue(12, 'em')).toEqual({
       value: 12,
       unit: 'em'
     })
-    expect(vtils.parseCSSValue('12', 'em')).toEqual({
+    expect(vtils.parseCssValue('12', 'em')).toEqual({
       value: 12,
       unit: 'em'
     })
@@ -526,3 +526,17 @@ describe('isEqualArray', () => {
     expect(vtils.isEqualArray(['1', '2', '3'], '123' as any)).toBeFalsy()
   })
 })
+
+describe('cssTransform', () => {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  test('cssTransform', () => {
+    vtils.cssTransform(el, 'translateX(100px)', '.3s ease')
+    expect(el.style.transform).toBe('translateX(100px)')
+    expect(el.style.transition).toBe('transform .3s ease')
+  })
+  test('cssTransform.stop', () => {
+    vtils.cssTransform.stop(el)
+    expect(el.style.transition).toBe('none')
+  })
+})