iPhoneでCSSトランジションを使用して要素をゼロに縮小するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/832099

質問

私は独自の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のドキュメント(登録が必要だと思います)はそうすべきだと言っていますか?

役に立ちましたか?

解決

最初の scale 引数を0ではなく非常に小さな10進数に設定すると、アニメーションが機能するようです。コード:

<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のバグかどうかはわかりませんが、そのようです。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top