描述
期望
BUG:
在android和ios(系统版本<=12)上正常的代码，在ios(>=13.5.1)上 如果前后角度相同会无法旋转
代码vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <template>
<div
class="container"
>
<div
v-show="display"
:style="{ transform: angle }"
class="demo-div"
>Hey
</div>
<h1>expect: show div, rotate div. rotate angle({{ rotateA }}), hide div</h1>
<div v-if="!unClickable">
<h2 @click="onClick(0)">Same angle(bug)</h2>
<h2 @click="onClick(60)">+60 angle</h2>
</div>
</div>
</template>
<script>
// rotate stuck on ios ( >=13.5.1 ) , works well on android and ios ( <= 12 )
export default {
data() {
return {
unClickable: false,
display: false,
angle: 'rotate(0deg)',
rotateA: 0
}
},
methods: {
onClick(deg) {
if (this.unClickable) {
return
}
this.unClickable = true
this.display = true
setTimeout(() => {
// if rotate don't change the rotation will stucked
this.rotateA = (this.rotateA + deg) % 360
this.angle = `rotate(${(6 * 360 + this.rotateA)}deg)`
}, 100)
// change 100 to 1000 works well
setTimeout(() => {
this.angle = 'rotate(0deg)'
this.display = false
this.unClickable = false
}, 5500)
}
}
}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h2 {
background-color: lightgrey;
padding: 1em;
}
.demo-div {
transition: transform ease-out 4.5s;
width: 50vw;
height: 50vh;
background-color: lightblue;
}
</style>
|
一些调试结果
如果和上一次结束的角度不同，则可以旋转。
如果把setTimeout调整到1000则可以旋转。
如果把v-show设置成始终显示也没有问题。
可能和vue关系不大，因为通过把v-show换成 纯js对的display操作也能重现
没有可以直接调试ios webview的工具。猜测是ios的 webview和 vue 的 v-show 某些处理出现了问题
在线demo
https://42zc6.csb.app