diff --git "a/\350\277\220\345\212\250\350\241\250\345\272\224\347\224\250\345\274\200\345\217\221/\347\273\204\344\273\266/\351\200\232\347\224\250/\345\212\250\347\224\273\346\240\267\345\274\217.md" "b/\350\277\220\345\212\250\350\241\250\345\272\224\347\224\250\345\274\200\345\217\221/\347\273\204\344\273\266/\351\200\232\347\224\250/\345\212\250\347\224\273\346\240\267\345\274\217.md" index 8cf0f13b1f5ad6c3b3284660f08eba1baa123444..948e515df1487fbd08c0c8c4a8d94a16cf584cb6 100755 --- "a/\350\277\220\345\212\250\350\241\250\345\272\224\347\224\250\345\274\200\345\217\221/\347\273\204\344\273\266/\351\200\232\347\224\250/\345\212\250\347\224\273\346\240\267\345\274\217.md" +++ "b/\350\277\220\345\212\250\350\241\250\345\272\224\347\224\250\345\274\200\345\217\221/\347\273\204\344\273\266/\351\200\232\347\224\250/\345\212\250\347\224\273\346\240\267\345\274\217.md" @@ -1,30 +1,41 @@ # 动画样式 +### 通用动画属性 + 组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。 +| 名称 | 类型 | 默认值 | 描述 | +| ------------------------- | ------------------ | ------ | ------------------------------------------------------------ | +| transform | string | - | 详见表1。 | +| animation-name | string | - | 指定@keyframes，详见表2。 | +| animation-delay | \ | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 | +| animation-duration | \ | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 说明： animation-duration 样式必须设置，否则时长为 0，则不会播放动画。 | +| animation-iteration-count | number \| infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 | +| animation-timing-function | string | linear | 描述动画执行的速度曲线，用于使动画更为平滑。 可选项有： - linear：表示动画从头到尾的速度都是相同的。 - ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 - ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 - ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | +| animation-fill-mode | string | none | 指定动画开始和结束的状态： - none：在动画执行之前和之后都不会应用任何样式到目标上。 - forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 | + +### 过渡动画属性 + | 名称 | 类型 | 默认值 | 描述 | | -------------------------- | -------------------------------------- | ------ | ------------------------------------------------------------ | -| transform | string | - | 详见表1。 | -| animation-name | string | - | 指定@keyframes，详见表2。 | -| animation-delay | \ | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 | -| animation-duration | \ | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 说明： animation-duration 样式必须设置，否则时长为 0，则不会播放动画。 | -| animation-iteration-count | number \| infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 | -| animation-timing-function | string | linear | 描述动画执行的速度曲线，用于使动画更为平滑。 可选项有： - linear：表示动画从头到尾的速度都是相同的。 - ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。 - ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。 - ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | -| animation-fill-mode | string | none | 指定动画开始和结束的状态： - none：在动画执行之前和之后都不会应用任何样式到目标上。 - forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 | -| transition-property | string | - | 指定执行 transition 效果的通用样式属性名称（已支持属性：height、width、opacity、borderWidth、borderColor、backgroundColor、transform） | +| transition-property | string | - | 指定执行 transition 效果的通用样式属性名称（已支持属性：height、width、opacity、border-width、border-color、background-color、transform） | | transition-duration | \ | 200 | 指定 transition 执行时间 | | transition-timing-function | linear\|ease-in\|ease-out\|ease-in-out | linear | 指定 transition 执行时的时间函数 | | transition-delay | \ | 0 | 指定 transition 开始执行的时间，即当改变元素属性值后多长时间开始执行 transition 效果 | **表1** transform操作说明 -| 名称 | 类型 | 描述 | -| ---------- | ------------------ | ------------------- | -| translateX | \ | X轴方向平移动画属性 | -| translateY | \ | Y轴方向平移动画属性 | -| rotate | \ \| \ | 旋转动画属性 | -| scaleX | \ | X轴方向缩放属性 | -| scaleY | \ | Y轴方向缩放属性 | +transform 属性的值可以是一个或多个以下函数的组合。 + +| 名称 | 类型 | 描述 | +| ---------- | ------------------ | ------------------------------ | +| translateX | \ | X轴方向平移动画属性 | +| translateY | \ | Y轴方向平移动画属性 | +| translate | \ | 同时在 X 和 Y 轴方向上平移元素 | +| rotate | \ \| \ | 旋转动画属性 | +| scaleX | \ | X轴方向缩放属性 | +| scaleY | \ | Y轴方向缩放属性 | +| scale | \ | 同时在 X 和 Y 轴方向上缩放元素 | 说明 @@ -61,7 +72,7 @@ ### 示例 -过渡动画： +以下示例展示了如何结合 transition 属性和 JavaScript 实现交互式的过渡动画 ```html @@ -126,6 +137,7 @@ } .title { background-color: aqua; + /* 定义过渡效果：哪些属性需要过渡，以及过渡的时长和速度曲线 */ transition-property: transform,width,height,opacity,border-width,border-color,background-color; transition-duration: 500; transition-timing-function: ease-out; @@ -225,7 +237,6 @@ export default { opacitySub() { this.opacity -= 1 }, - // 按钮4: 切换边框宽度 toggleBorderWidth() { this.isBorderWidthToggled = !this.isBorderWidthToggled; if (this.isBorderWidthToggled) { @@ -234,8 +245,6 @@ export default { this.boxBorderWidth = '2px'; } }, - - // 按钮5: 切换边框颜色 toggleBorderColor() { this.isBorderColorToggled = !this.isBorderColorToggled; if (this.isBorderColorToggled) { @@ -244,8 +253,6 @@ export default { this.boxBorderColor = '#00ff00'; } }, - - // // 按钮6: 切换背景颜色 toggleBackgroundColor() { this.isBackgroundColorToggled = !this.isBackgroundColorToggled; if (this.isBackgroundColorToggled) {