Css и jQuery: как мне запустить перемещение анимированного элемента CSS3 туда, где он был до анимации? - PullRequest
Новая
       1

Css и jQuery: как мне запустить перемещение анимированного элемента CSS3 туда, где он был до анимации?

1 голос
/ 28 октября 2011

http://jsfiddle.net/cD4Gr/4/

Le Код: 

$j(document).bind('click', function() { 
    $j("#test").css({ bottom:0px })
    });

Глядя в инспекторе, даже когда элемент находится вверху страницы, он все равно говорит, что его нижнее значение равно 0.

Может быть, мне нужно как-нибудь воспроизвести анимацию в обратном направлении? или сыграть другую анимацию? (С использованием Bottom%, а не top%)

Ответы [ 2 ]

3 голосов
/ 28 октября 2011

Как вы и думали, вы можете сделать второй блок ключевых кадров, чтобы сбросить его обратно на дно: 

@-webkit-keyframes reset_to_bottom {
    0%, 100% {
        top: auto;
        bottom: 0;
        z-index: 1000000;
        opacity: 0.5;
    }
}

тогда ваш jQuery меняет название анимации: 

$j("#test").css({
    '-webkit-animation-name': 'reset_to_bottom'
});

jsfiddle

При использовании -webkit-animation-fill-mode: forwards; форварды будут поддерживать последние стили ключевых кадров, поэтому top:0% по-прежнему установлен, поэтому bottom:0 не имел никакого эффекта

для удовольствия ... переключаться между анимациями при каждом нажатии

jsfiddle 

$j(document).bind('click', function() {
    if ($j("#test").css('-webkit-animation-name') == "slide_to_top") {
        $j("#test").css({'-webkit-animation-name': 'reset_to_bottom'});
    } else {
        $j("#test").css({'-webkit-animation-name': 'slide_to_top'});
    }
});
0 голосов
/ 28 октября 2011

Если я правильно понимаю ситуацию, думаю, эти изменения должны решить вашу проблему:

CSS: 

#test {
  ...
  //bottom: 0px; //Remove this line
  top:100%;      //Replace with this
  ...
}

JavaScript: 

//$j("#test").css({ bottom:0px })
$j("#test").css({ top:0 })

Кстати, я предпочитаю использовать функцию jQuery animate() вместо CSS для анимации, в основном потому, что она уже поддерживает все основные браузеры. Таким образом, мне не нужно беспокоиться о включении нескольких стилей CSS для разных браузеров.

...