Перемещение по дуге с переходами Webkit - PullRequest
Новая
       30

Перемещение по дуге с переходами Webkit

1 голос
/ 18 февраля 2011

Сейчас я пытаюсь собрать что-то действительно простое, извлечь из него урок и включить его в более крупный проект.

У меня есть простая коробка, которую я пытаюсь переместить из одной позиции в другую, используя анимацию css webkit и функцию перевода (для целей аппаратного ускорения iOS). Мне нужно, чтобы он двигался по дуге, а затем оставался в этой точке на вершине дуги.

Теперь я довольно новичок в переходах CSS. В прошлом я использовал анимацию jQuery, но, похоже, она очень медленно работает на мобильных устройствах. Я знаю, что, возможно, есть некоторые передовые практики, которые я могу использовать здесь для настройки и управления этими анимациями, но я как бы выясняю их по ходу работы.

Прямо сейчас коробка перемещается полностью вверх и затем возвращается в исходное положение. Как мне заставить его остаться там?

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/

<style type="text/css">

#ball {
    display:block;
    position: absolute;
    width: 50px;
    height: 50px;
    overflow: hidden;
    top: 500px;
    left: 100px;
    background-color: red;  
} #action {
    display: block;
    font-weight:bold;
}

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes throwBall {
    from { -webkit-transform: translate( 0px, 0px ); }
    25% { -webkit-transform: translate( 75px, -25px ) }
    50% { -webkit-transform: translate( 150px, -75px ) }
    75% { -webkit-transform: translate( 225px, -150px ) }
    to { -webkit-transform: translate( 300px, -300px ); }
}


</style>

<script type="text/javascript">
    if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>

<a id='action'>Animate Me</a>

<div id='ball'></div>

<script type="text/javascript">
$(document).ready(function(){
    $('#action').bind('click',function(){
        $('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
        });
    });
});
</script>

1 Ответ

3 голосов
/ 18 февраля 2011

Просто добавьте конечное состояние анимации в ваш класс, так как свойства, установленные анимацией, будут удалены, когда анимация закончится.Добавление -webkit-transform: translate(300px, -300px); к вашему animation классу решит вашу проблему. 

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(300px, -300px); 
}
...