如何使用iPhone上的CSS过渡使元素缩小到空？

Question

我正在尝试使用专有的iPhone Safari属性 -webkit-transition 和 -webkit-transform 来使元素以优雅的动画消失。代码：

<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>

我希望这个元素能够通过优雅的动画缩小为隐形。

这适用于桌面Safari（OS X 10.5.6上的3.2.1（5525.27.1）），但在iPhone（iPhone OS 2.2.1（5H11））上， div 只是突然消失了。

有没有办法让动画像 Apple的文档（需要注册，我认为）说应该吗？

Answer 1

将第一个 scale 参数设置为一个非常小的小数，而不是0，似乎使动画有效。代码：

<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的错误，但似乎就是这样。