From 260d9017ac1db2518919b852b792127f170f2678 Mon Sep 17 00:00:00 2001 From: jingxin10 Date: Thu, 19 Mar 2026 16:59:24 +0800 Subject: [PATCH 1/4] =?UTF-8?q?'=E8=A1=A5=E5=85=85css=E8=BF=87=E6=B8=A1?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=B1=9E=E6=80=A7'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\350\275\254\350\265\260\347\204\246.md" | 4 +- ...50\347\224\273\346\240\267\345\274\217.md" | 231 +++++++++++++++++- 2 files changed, 221 insertions(+), 14 deletions(-) diff --git "a/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" index 6cff54a..72df34a 100644 --- "a/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" +++ "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" @@ -1,4 +1,4 @@ -### 焦点 +### 焦点（二轮车应用容器组件设置窗口获焦，子组件才能获焦） 给组件绑定ref属性，通过ref获取组件，设置focus属性为true使组件获焦。 @@ -188,7 +188,7 @@ options参数 | 名称 | **类型** | 可选 | **说明** | | ------ | -------- | ---- | ------------------------------------------------------------ | | focus | boolean | 否 | 设置窗口是否获焦（应用打开时设置focus为true，应用退出时设置focus为false） | -| viewId | string | 是 | 获焦的组件目标id（不设置默认为窗口容器获焦） | +| viewId | string | 是 | 获焦的组件目标id（focus为false时不用设置，focus为true时需要设置） | #### 属性 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 3b93c8f..6a690f8 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" @@ -2,23 +2,29 @@ 组件普遍支持的可以在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-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 | \ \| \ | 旋转动画属性 | +| rotate | \ \| \ | 旋转动画属性 | +| scaleX | \ | X轴方向缩放属性 | +| scaleY | \ | Y轴方向缩放属性 | 说明 @@ -52,3 +58,204 @@ 说明 @keyframes的from/to不支持动态绑定。 + +### 示例 + +过渡动画： + +```html + + +
+
+
+
+
+
+
+ + + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ +
+``` + +```css +/* xxx.css */ +.container { + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + flex-direction: row; +} +.leftGroup { + width: 50%; + height: 100%; + justify-content: center; + align-items: center; + flex-direction: column; +} +.title { + background-color: aqua; + transition-property: transform,width,height,opacity,border-width,border-color,background-color; + transition-duration: 500; + transition-timing-function: ease-out; + transition-delay: 300ms; +} +.btnGroup { + width: 300px; + height: 100%; + justify-content: center; + align-items: center; + margin-top: 50px; +} +.addGroup { + width: 150px; + height: 100%; + justify-content: center; + align-items: center; + flex-direction: column; +} +.subGroup { + width: 150px; + height: 100%; + justify-content: center; + align-items: center; + flex-direction: column; +} +.btn { + width: 150px; +} +``` + +```js +// js +export default { + data: { + title: '', + height: 80, + width: 200, + scaleX: 100, + scaleY: 100, + translateX: 10, + translateY: 10, + rotate: 30, + opacity: 10, + boxBorderWidth: '2px', + boxBorderColor: '#00ff00', + boxBackgroundColor: '#3498db', + isBorderWidthToggled: false, + isBorderColorToggled: false, + isBackgroundColorToggled: false + }, + rotateAdd() { + this.rotate += 10 + }, + rotateSub() { + this.rotate -= 10 + }, + transXAdd() { + this.translateX += 50 + }, + transXSub() { + this.translateX -= 50 + }, + transYAdd() { + this.translateY += 50 + }, + transYSub() { + this.translateY -= 50 + }, + scaleXAdd() { + this.scaleX += 20 + }, + scaleXSub() { + this.scaleX -= 20 + }, + scaleYAdd() { + this.scaleY += 20 + }, + scaleYSub() { + this.scaleY -= 20 + }, + widthAdd() { + this.width += 20 + }, + widthSub() { + this.width -= 20 + }, + heightAdd() { + this.height += 20 + }, + heightSub() { + this.height -= 20 + }, + opacityAdd() { + this.opacity += 1 + }, + opacitySub() { + this.opacity -= 1 + }, + // 按钮4: 切换边框宽度 + toggleBorderWidth() { + this.isBorderWidthToggled = !this.isBorderWidthToggled; + if (this.isBorderWidthToggled) { + this.boxBorderWidth = '20px'; + } else { + this.boxBorderWidth = '2px'; + } + }, + + // 按钮5: 切换边框颜色 + toggleBorderColor() { + this.isBorderColorToggled = !this.isBorderColorToggled; + if (this.isBorderColorToggled) { + this.boxBorderColor = '#ff0000'; + } else { + this.boxBorderColor = '#00ff00'; + } + }, + + // // 按钮6: 切换背景颜色 + toggleBackgroundColor() { + this.isBackgroundColorToggled = !this.isBackgroundColorToggled; + if (this.isBackgroundColorToggled) { + this.boxBackgroundColor = '#FFFFFF'; // 白色 + } else { + this.boxBackgroundColor = '#3498db'; // 蓝色 + } + } +}; +``` + -- Gitee From dabc083cb93cc5cbe0fc0c3ce77fdb1d07a832f5 Mon Sep 17 00:00:00 2001 From: jingxin10 Date: Thu, 19 Mar 2026 17:01:15 +0800 Subject: [PATCH 2/4] =?UTF-8?q?'=E6=96=87=E6=A1=A3=E8=A1=A5=E5=85=85'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...24\250\346\227\213\350\275\254\350\265\260\347\204\246.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" index 72df34a..ae507db 100644 --- "a/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" +++ "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" @@ -1,6 +1,6 @@ -### 焦点（二轮车应用容器组件设置窗口获焦，子组件才能获焦） +### 焦点 -给组件绑定ref属性，通过ref获取组件，设置focus属性为true使组件获焦。 +给组件绑定ref属性，通过ref获取组件，设置focus属性为true使组件获焦（二轮车应用容器组件设置窗口获焦，子组件才能获焦）。 #### API -- Gitee From 034d78a6d037e263b4900033ac373d1311b89ab3 Mon Sep 17 00:00:00 2001 From: jingxin10 Date: Thu, 19 Mar 2026 17:07:25 +0800 Subject: [PATCH 3/4] =?UTF-8?q?'css=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\345\212\250\347\224\273\346\240\267\345\274\217.md" | 2 -- 1 file changed, 2 deletions(-) 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 6a690f8..3f7b58c 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" @@ -91,7 +91,6 @@ -
@@ -103,7 +102,6 @@ -
-- Gitee From c91a5cd878de1e3fb5efa095161c9f7e23f5f418 Mon Sep 17 00:00:00 2001 From: jingxin10 Date: Thu, 19 Mar 2026 17:28:40 +0800 Subject: [PATCH 4/4] =?UTF-8?q?'=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\345\212\250\347\224\273\346\240\267\345\274\217.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3f7b58c..8cf0f13 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" @@ -168,7 +168,7 @@ export default { scaleY: 100, translateX: 10, translateY: 10, - rotate: 30, + rotate: 0, opacity: 10, boxBorderWidth: '2px', boxBorderColor: '#00ff00', -- Gitee