Как сделать так, чтобы элемент масштабировался до нуля с помощью CSS-перехода на iPhone? - PullRequest
Новая
       27

Как сделать так, чтобы элемент масштабировался до нуля с помощью CSS-перехода на iPhone?

0 голосов
/ 07 мая 2009

Я пытаюсь использовать собственные свойства 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 (3.2.1 (5525.27.1) на OS X 10.5.6), но на iPhone (iPhone OS 2.2.1 (5H11)) div просто внезапно исчезает.

Есть ли способ заставить анимацию работать, как Документация Apple (требуется регистрация, я думаю) говорит, что должна?

1 Ответ

0 голосов
/ 07 мая 2009

Установка первого аргумента 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 или нет, но, похоже, это так.

...