- 发布：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 时，应用了上述样式的容器会变形
HBuilderX alpha 3.1.22+ 已修复
-
雨夜敬清秋 (作者)
好的，测试后确认修复，并发现了新的问题，ctx.measureText 在 for 循环中，第一个 text 的 width 始终是 null，该问题在安卓端可复现，https://ask.dcloud.net.cn/question/126609
2021-07-08 09:25
-
