javascript - 如何在播放一次 CSS3 动画后停止运行并调用新动画？

Question

现在我正在开发一个响应式 slider ，我正在调用第一组的动画。我的 slider 是一个网格系统，设置为 HTML 中的两个 li 类。一个被标记为“负载”，另一个被称为“过渡”。

我遇到的问题是我的网站有一个预加载器预先加载所有内容，所以一旦加载栏完成，网格加载，第一个 li 类进来，“加载”，然后进来通过 animateUp 动画向上。

因此，当第一组进入时，它会通过动画向上移动，如果用户激活下一个 li 类，它就会过渡到淡出。但是，我希望能够通过按向右箭头键阻止我的用户绕网格旋转，而不是在第二个 li 处停止它们并强制用户使用后退键返回到第一个 child 和也停止 animateUp 并让第一个 li 类在 animateUp 播放后采用过渡。

这里是 jsFiddle 以获得更好的想法 http://jsfiddle.net/BNq6t/1/embedded/result/

您可以使用箭头键导航(向右/向左)

(注意当你回到第一个 child 时 animateUp 是如何播放的)

HTML

    <div id="slider">
        <ul>
        <!-- #slider js PAGE 1 -->
        <li class="load">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio5.png"> 
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio3.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio9.png">


            <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample8.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio2.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio6.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/readli.png">      

        </li>
        <!-- / PAGE 1 -->

        <!-- #slider js PAGE 2 -->
        <li class="transition">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
        </li>
        <!-- / PAGE 2 -->
        </ul>
    </div>

slider

jQuery(document).ready(function ($) {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 500, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 500, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

$('#back').click(function () {
    moveRight();
})
$('#next').click(function () {
    moveRight();
})

$('#next').click(function () {
  if (('#next').click = clicked) {
    ('#back:after').css('visbilility: visible;')
  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    moveRight();
  } else {

  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 37) {
    moveLeft(); 
  } else {

  }
})

});

CSS

#slider li.load img:nth-child(-n+3) {
    animation: pushUp 2.4s linear;
    -webkit-animation: pushUp 2.4s linear;
    -moz-animation: pushUp 2.4s linear;
    -o-animation: pushUp 2.4s linear;
}
#slider li.load img:nth-child(4), 
#slider li.load img:nth-child(5), 
#slider li.load img:nth-child(6) {
    animation: pushUp .5s linear;
    -webkit-animation: pushUp .5s linear;
    -moz-animation: pushUp .5s linear;
    -o-animation: pushUp .5s linear;
}
#slider li.load img:nth-child(7), 
#slider li.load img:nth-child(8), 
#slider li.load img:nth-child(9) {
    animation: pushUp 1.1s linear;
    -webkit-animation: pushUp 1.1s linear;
    -moz-animation: pushUp 1.1s linear;
    -o-animation: pushUp 1.1s linear;
}
#slider li.transition img {
    animation: fadeIn .55s;
    -webkit-animation: fadeIn .55s;
            -moz-animation: fadeIn .55s;
            -o-animation: fadeIn .55s; 
}

谢谢。(此外，这篇文章中的代码与 jsFiddle 中关于图像的代码不同)

Answer 1

有一个 iteration-count 属性。

你可以使用它。

这里是所有“无前缀”的属性:

animation-name:  
animation-duration:  
animation-iteration-count:
animation-direction:  
animation-timing-function:     
animation-fill-mode:  
animation-delay:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/