Question

我正在尝试通过JavaScript创建一个焰火动画。我使用jQuery使用迭代计数1来调用CSS3动画，但使用webkitAnimationEnd事件 - 当您使用纯CSS3迭代计数无效时不触发 - 所以我觉得它使用循环会更合适。

我选择JavaScript是因为我需要按顺序播放事件，但控制力要比CSS3提供的更多。

示例：http://codepen.io/tusharsaurabh/pen/YpqOZB

当我在循环中执行动画时，不会启动动画。在另一个Stack Overflow帖子中，有人提到重新生成HTML内容 - 我做了，并且向上的线路正在被触发，尽管动画的其余部分。

如何使用纯JavaScript / jQuery（无CSS3）在循环中运行所有动画？

var rocket = document.getElementById('shooting'),

    // Circles
    circle1 = document.getElementById('circle-1'),
    circle2 = document.getElementById('circle-2'),
    circle3 = document.getElementById('circle-3'),
    circle4 = document.getElementById('circle-4'),

    // Timer
    shootingTimer = null;

// Listen for webkitAnimationEnd
rocket.addEventListener("webkitAnimationEnd", animation_end_rocket);
circle1.addEventListener("webkitAnimationEnd", animation_end_circle);
circle2.addEventListener("webkitAnimationEnd", animation_end_circle);
circle3.addEventListener("webkitAnimationEnd", animation_end_circle);
circle4.addEventListener("webkitAnimationEnd", animation_end_circle);

function animation_end_rocket() {
  $('#circle-1').css('display', 'block');
  $('#circle-1').css('animation', 'zoom1 0.1s 1');
}

function animation_end_circle1() {
  $('#circle-1').css('display', 'none');
  $('#circle-2').css('display', 'block');
  $('#circle-2').css('animation', 'zoom1 0.1s 1');
}

function animation_end_circle2() {
  $('#circle-2').css('display', 'none');
  $('#circle-3').css('display', 'block');
  $('#circle-3').css('animation', 'zoom1 0.1s 1');

}

function animation_end_circle3() {
  $('#circle-3').css('display', 'none');
  $('#circle-4').css('display', 'block');
  $('#circle-4').css('animation', 'zoom1 0.1s 1');

}

function animation_end_circle4() {
  $('#circle-4').css('display', 'none');
}

function shoot() {

    var container = document.getElementById('main'),
        content = container.innerHTML;

        container.innerHTML = content;

        $("#shooting").css("animation", 1000);
}

shootingTimer = = setInterval(shoot, 100);

Javascript替代动画 - 迭代 - 计数为无限

0 个答案: