如何在 iPhone 上使用 CSS 过渡使元素缩小到零？答案

【问题标题】：How do I make an element scale down to nothing using a CSS transition on the iPhone?如何在 iPhone 上使用 CSS 过渡使元素缩小到零？
【发布时间】：2010-10-24 08:15:13
【问题描述】：

我正在尝试使用专有的 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’s documentation (registration required, I think) 所说的那样工作？

【问题讨论】：

只是为了让您知道您的原始代码（问题中的那个）可以正常工作，您可以在一个简单的截屏视频中看到它：is.gd/xk7H
当然，抱歉，我应该更清楚一点：代码在桌面 Safari 中运行良好，iPhone 上的 Safari 似乎有问题。不过，截屏视频做得很好，谈谈清晰度。我敢打赌，很多 Stack Overflow 的答案都可以从一些视频中受益。

标签： iphone css animation safari webkit

【解决方案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 的错误，但似乎是这样。

【讨论】：