设置了一个隐藏的圆环，在页面开始时旋转露出。发现在IOS(safari)中过渡动画展示不完整，只展示了起始部分，后面直接跳转到结束状态了。
demo
.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;
}
var is = true
$(‘.button’).click(function () {
$(‘.circular’).toggleClass(‘start’, is)
is = !is
})
setTimeout(function () {
$(‘.button’).click()
}, 100)
经过调试，有两个方法可以避免出现这个问题，
1.setTimeout 触发时机设置在500ms以上
2.外层.wrap 不设置overflow
感觉应该是IOS渲染机制的问题，这里不是很了解，有没有大神科普一下，顺便给下解决方案。