如何使一个元素使用iPhone上的CSS过渡缩小到什么? [英] How do I make an element scale down to nothing using a CSS transition on the iPhone?
问题描述
我试图使用专有的iPhone Safari浏览器性能 -webkit-过渡
和 -webkit-变换
来使一个元素与优雅的动画消失。 code:
I’m trying to use the proprietary iPhone Safari properties -webkit-transition
and -webkit-transform
to make an element disappear with a graceful animation. Code:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
我所期望的元素向下收缩到无形的,优美的动画。
I’d expect the element to shrink down to invisible with a graceful animation.
这适用于桌面Safari浏览器(3.2.1(5525.27.1)在OS X 10.5.6),但在iPhone(iPhone OS 2.2.1(5H11)),在 DIV <精/ code>就这样消失突然。
This works fine on desktop Safari (3.2.1 (5525.27.1) on OS X 10.5.6), but on the iPhone (iPhone OS 2.2.1 (5H11)), the div
just disappears abruptly.
有没有什么办法让喜欢动漫作品<一href=\"https://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/chapter%5F5%5Fsection%5F1.html#//apple%5Fref/doc/uid/TP40008032-CH4-SW1\"相对=nofollow>苹果的文档(需要注册,我认为)说,它应注意什么?
Is there any way to make the animation work like Apple’s documentation (registration required, I think) says it should?
推荐答案
第一个比例
的参数设定到一个非常小的小数,而不是0,似乎使动画工作。 code:
Setting the first scale
argument to a very small decimal, rather than 0, seems to make the animation work. Code:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0.000001,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
不知道这是一个iPhone的bug或没有,但看起来它。
Not sure if this is an iPhone bug or not, but it seems like it.
这篇关于如何使一个元素使用iPhone上的CSS过渡缩小到什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!