iphone - 如何使用 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>

我希望元素通过优美的动画缩小到不可见。

这在 OS X 10.5.6 上的桌面 Safari（3.2.1（5525.27.1））上运行良好，但在 iPhone（iPhone OS 2.2.1（5H11））上，它div突然消失了。

有没有办法让动画像苹果的文档（我认为需要注册）所说的那样工作？

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