无
- 发布:2022-01-25 17:09
- 更新:2022-01-25 17:09
- 阅读:848
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11 22000.434
HBuilderX类型: 正式
HBuilderX版本号: 3.3.10
第三方开发者工具版本号: 1.05.2111300
基础库版本号: 2.21.4
项目创建方式: HBuilderX
操作步骤:
预期结果:
按动态赋值的角度为起始旋转角度
按动态赋值的角度为起始旋转角度
实际结果:
从0开始
从0开始
bug描述:
1、在style 中定义css 变量及需要用到的样式
/*定义全局变量*/
.dial-area{
--hourAngleFrom:0deg;
--hourAngleTo:0deg;
--minuteAngleFrom:0deg;
--minuteAngleTo:0deg;
}
.hour-hand{
width: 4upx;
height: 36%;
position: absolute;
left: 50%;
top: 14%;
margin-left: -2upx;
background: #000;
transform: rotate(var(--hourAngleFrom));
transform-origin:center bottom;
animation: hour 43200s linear infinite;
}
.minute-hand{
width: 2upx;
height: 46%;
position: absolute;
left: 50%;
top: 4%;
margin-left: -1upx;
background: #000;
transform: rotate(var(--minuteAngleFrom));
transform-origin:center bottom;
animation: minute 3600s linear infinite;
}
@keyframes hour
{
from {transform:rotate(var(--hourAngleFrom));}
to {transform:rotate(var(--hourAngleTo));}
}
@keyframes minute
{
from {transform:rotate(var(--minuteAngleFrom));}
to {transform:rotate(var(--minuteAngleTo));}
}
2、动态修改css变量的值
<view class="dial-area" :style="'--hourAngleFrom:'+hourAngle+'deg;--hourAngleTo:'+(hourAngle+360)+'deg;--minuteAngleFrom:'+minuteAngle+'deg;--minuteAngleTo:'+(minuteAngle+360)+'deg;'">
代码就是这样,打包为h5可以正常运行,旋转角度为修改css变量后的角度,而小程序始终是从0开始。在微信开发者工具中调试手动改变样式,恢复正常,像是视图没有更新
0 个回复