![雨夜敬清秋](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/00/16/23_avatar_mid.jpg?v=0)
- 发布:2021-06-28 14:44
- 更新:2021-07-07 20:16
- 阅读:800
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 11.4
HBuilderX类型: 正式
HBuilderX版本号: 3.1.18
手机系统: 全部
手机厂商: 华为
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view class="content">
<button type="default" class="action" @tap="handleTest">点击这里测试</button>
<image
src="/static/logo.png"
mode="widthFix"
class="box"
:style="{
width: '50px',
height: '50px',
transform: `rotate(${testDeg}deg)`,
transitionDuration: '1s'
}"
></image>
</view>
</template>
<script>
export default {
data() {
return {
testDeg: 0
}
},
methods: {
handleTest () {
this.testDeg -= 10
console.log('testDeg', this.testDeg)
}
},
onLoad () {
this.testDeg = -100
}
}
</script>
<style lang="scss" scoped>
.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.box {
transition: transform cubic-bezier(.34, .12, .05, .95);
}
.action {
position: absolute;
left: 0;
right: 0;
top: 0;
}
</style>
<template>
<view class="content">
<button type="default" class="action" @tap="handleTest">点击这里测试</button>
<image
src="/static/logo.png"
mode="widthFix"
class="box"
:style="{
width: '50px',
height: '50px',
transform: `rotate(${testDeg}deg)`,
transitionDuration: '1s'
}"
></image>
</view>
</template>
<script>
export default {
data() {
return {
testDeg: 0
}
},
methods: {
handleTest () {
this.testDeg -= 10
console.log('testDeg', this.testDeg)
}
},
onLoad () {
this.testDeg = -100
}
}
</script>
<style lang="scss" scoped>
.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.box {
transition: transform cubic-bezier(.34, .12, .05, .95);
}
.action {
position: absolute;
left: 0;
right: 0;
top: 0;
}
</style>
操作步骤:
请看运行附件中的示例项目
请看运行附件中的示例项目
预期结果:
不变形
不变形
实际结果:
变形
变形
bug描述:
style 样式 transform: rotate(${testDeg}deg)
当 testDeg 的初始值小于 -90 时,应用了上述样式的容器会变形
![DCloud_UNI_GSQ](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/86/84/57_avatar_mid.jpg?v=1635249686)
HBuilderX alpha 3.1.22+ 已修复
-
雨夜敬清秋 (作者)
好的,测试后确认修复,并发现了新的问题,ctx.measureText 在 for 循环中,第一个 text 的 width 始终是 null,该问题在安卓端可复现,https://ask.dcloud.net.cn/question/126609
2021-07-08 09:25
-