tween-one 里的可支持 style 动画参数说明。
动画默认参数: duration: 450毫秒, ease: 'easeInOutQuad'; 以下文本中出现的到为默认动画。
| 参数名称 | 说明 |
|---|---|
| width | { width: 100 } 元素当前宽度到 100px |
| maxWidth | { maxWidth: 100 } 元素当前最大宽度到 100px |
| minWidth | { minWidth: 100 } 元素当前最小宽度到 100px |
| height | { height: 100 } 元素当前高度到 100px |
| maxHeight | { maxHeight: 100 } 元素当前最大高度到 100px |
| minHeight | { mimHeight: 100 } 元素当前最小高度到 100px |
| lineHeight | { lineHeight: 100 } 区块行高到 100px |
| opacity | { opacity: 0 } 元素当前透明度到 0 |
| top | { top: 100 } 元素当前顶部距离到 100px, 需配合 `position: relative |
| right | { right: 100 } 元素当前右部距离到 100px, 需配合 `position: relative |
| bottom | { bottom: 100 } 元素当前下部距离到 100px, 需配合 `position: relative |
| left | { left: 100 } 元素当前左部距离到 100px, 需配合 `position: relative |
| marginTop | { marginTop: 100 } 元素当前顶部外边距离到 100px |
| marginRight | { marginRight: 100 } 元素当前右部外边距离到 100px |
| marginBottom | { marginBottom: 100 } 元素当前下部外边距离到 100px |
| marginLeft | { marginLeft: 100 } 元素当前左部外边距离到 100px |
| paddingTop | { paddingTop: 100 } 元素当前顶部内边距离到 100px |
| paddingRight | { paddingRight: 100 } 元素当前右部内边距离到 100px |
| paddingBottom | { paddingBottom: 100 } 元素当前下部内边距离到 100px |
| paddingLeft | { paddingLeft: 100 } 元素当前左部内边距离到 100px |
| color | { color: '#FFFFFF' } 元素当前文字颜色到白色 |
| backgroundColor | { backgroundColor: '#FFFFFF' } 元素当前背景颜色到白色 |
| borderWidth | { borderWidth: 2 } 元素当前边框宽度到 2px，同样可用 borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth |
| borderRadius | { borderRadius: 5 } 元素当前圆角到 5px, 同上, 同样可用 上 左 下 右 |
| borderColor | { borderColor: '#FFFFFF' } 元素当前边框颜色到白色 |
| boxShadow | { boxShadow: '0 0 10px #000' } 元素当前阴影模糊到 10px |
| textShadow | { textShadow: '0 0 10px #000' } 元素当前文字内容阴影模糊到 10px |
| 参数名称 | 说明 |
|---|---|
| translateX / X | { translateX: 10 } or { x: 10 } => transform: translateX(10px), x 方向的位置移动 10px |
| translateY / y | { translateY: 10 } or { y: 10 } => transform: translateY(10px), y 方向的位置移动 10px |
| translateZ / z | { translateZ: 10 } or { z: 10 } => transform: translateZ(10px), z 方向的位置移动 100px |
| rotate | { rotate: 10 } => transform: rotate(10deg) 元素以 transformOrigin 的中心点旋转 10deg |
| rotateX | { rotateX: 10 } => transform: rotateX(10deg) 元素以 transformOrigin 的中心点向 X 旋转 10deg |
| rotateY | { rotateY: 10 } => transform: rotateY(10deg) 元素以 transformOrigin 的中心点向 Y 旋转 10deg |
| scale | { scale: 0 } => transform: scale(0) 元素以 transformOrigin 的中心点缩放到 0 |
| scaleX | { scaleX: 0 } => transform: scaleX(0) 元素以 transformOrigin 的中心点 X 缩放到 0 |
| scaleY | { scaleY: 0 } => transform: scaleY(0) 元素以 transformOrigin 的中心点 Y 缩放到 0 |
| transformOrigin | { transformOrigin: '50px 50px'} 元素当前中心点到 x: 50px y: 50px |
| 参数名称 | 说明 |
|---|---|
| grayScale | { grayScale: 1 } 元素 filter 灰度到 100% |
| sepia | { sepia: 1 } 元素 filter 颜色到 100% |
| hueRotate | { hueRotate: '90deg' } 元素 filter 色相盘旋转 90 度 |
| invert | { invert: 1 } 元素 filter 色值反相到 100% |
| brightness | { brightness: 2 } 元素 filter 亮度到 200% |
| contrast | { contrast: 2 } 对比度到 200% |
| saturate | { saturate: 2 } 饱和度到 200% |
| blur | { blur: '20px' } 模糊到 20px |
以上为 tween-one 里的动画可支持参数，如有其它样式可动画或以上有误，烦请 PR 来修改。。