Comment puis-je réduire à néant un élément en utilisant une transition CSS sur l'iPhone?

Question

Je tente d'utiliser les propriétés -webkit-transition et -webkit-transform de l'iPhone Safari, afin de faire disparaître un élément avec une animation élégante. 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>

J'attendrais de l'élément qu'il devienne invisible avec une animation élégante.

Cela fonctionne très bien sur le bureau Safari (3.2.1 (5525.27.1) sous OS X 10.5.6), mais sur l'iPhone (iPhone OS 2.2.1 (5H11)), le div . disparaît brusquement.

Existe-t-il un moyen de faire fonctionner l'animation de la manière La documentation de Apple (enregistrement obligatoire, je pense) le dit?

Answer 1

Définir le premier argument scale sur une très petite décimale, plutôt que sur 0, semble faire fonctionner l’animation. 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>

Je ne suis pas sûr qu'il s'agisse d'un bug de l'iPhone ou non, mais cela semble être le cas.