Wie kann ich ein Element machen auf dem iPhone einen CSS-Übergang verkleinere nichts mit?

Question

Ich versuche, die proprietären iPhone Safari Eigenschaften -webkit-transition und -webkit-transform zu verwenden, um ein Element mit einer anmutigen Animation verschwinden. 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>

Ich würde erwarten, dass das Element mit einer anmutigen Animation unsichtbar schrumpfen.

Dies funktioniert auf Desktop-Safari (3.2.1 (5525.27.1) auf OS X 10.5.6), aber auf dem iPhone (iPhone OS 2.2.1 (5H11)), die div nur verschwindet plötzlich.

Gibt es eine Möglichkeit die Animation Arbeit wie Apples Dokumentation (Registrierung erforderlich, glaube ich) sagt sie sollte?

Answer 1

das erste scale Argument auf eine sehr kleine Dezimaleinstellung, eher als 0 ist, scheint die Animation Arbeit zu machen. 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>

Nicht sicher, ob dies ein iPhone Bug oder nicht, aber es scheint, wie es.