CSS 过渡动画在IOS中表现异常
设置了一个隐藏的圆环，在页面开始时旋转露出。发现在IOS(safari)中过渡动画展示不完整，只展示了起始部分，后面直接跳转到结束状态了。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
.wrap {
width: 200px;
height: 100px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.circular {
height: 160px;
width: 160px;
border: 20px solid transparent;
border-top: 20px solid green;
border-right: 20px solid green;
position: absolute;
border-radius: 50%;
transform: rotate(-225deg);
transition: transform 2000ms ease-in;
left: 0;
top: 0;
}
.circular.start {
transform: rotate(-45deg);
}
.button {
margin: 20px auto;
background-color: #EEEEEE;
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="circular"></div>
</div>
<div class="button">set</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script>
var is = true
$('.button').click(function () {
$('.circular').toggleClass('start', is)
is = !is
})
setTimeout(function () {
$('.button').click()
}, 100)
</script>
</body>
</html>经过调试，有两个方法可以避免出现这个问题，
1.setTimeout 触发时机设置在500ms以上
2.外层.wrap 不设置overflow
感觉应该是IOS渲染机制的问题，这里不是很了解，有没有大神科普一下，顺便给下解决方案。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论