javascript - 如何同时执行多个动画

Question

我正在使用两个函数来淡入/淡出元素。我知道这两个函数都可以正常工作，并且当我在控制台中依次测试它们时，它们会执行我想要的操作。

但是

fadeIn()
fadeOut()

似乎使它们同时执行。

function fadeIn(el) {
      el.style.opacity = 0;
      el.style.display = 'block';

      var tick = function() {

        el.style.opacity = +el.style.opacity + 0.01;


        if (+el.style.opacity < 1) {
          (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
        }
      };

      tick();
}

function fadeOut(el) {
  el.style.opacity = 1;

  var tickOut = function() {
    el.style.opacity = +el.style.opacity - 0.01;


    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tickOut)) || setTimeout(tickOut, 2500)
    }
    else if (+el.style.opacity === 0){
    el.style.display = 'none';
    }
  };

  tickOut();
}

链接到 JsFiddle:https://jsfiddle.net/cwu9sg3h/

编辑:预期结果是引用淡入然后淡出，然后切换到另一个淡入/淡出的引用。它永远不会停止轮换报价。

编辑#2:我无法在这个项目中使用 jQuery!

Answer 1

当您调用fadeIn时和fadeOut ，紧接着彼此，他们都注册了要在下一帧调用的tick函数//tick(取决于是否支持requestAnimationFrame。)

为了按顺序运行动画，您必须知道 fadeIn 何时完成，以便您可以开始淡出它。如果总是淡入后淡出，可以调用fadeOut里面fadeIn ，像这样:

var f;
if (+el.style.opacity < 1) {
    f = tick;
} else {
    f = fadeOut;
}
(window.requestAnimationFrame && requestAnimationFrame(f)) || setTimeout(f, 2500)

所以你用这个代替 if您当前在 fadeIn 中的语句。

如果你想制作fadeIn更具可重用性，您可以使用回调来代替。

function fadeIn(el, callback) {
  el.style.opacity = 0;
  el.style.display = 'block';

  var tick = function() {

    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
    }else{
        callback(el)
    }
  };

  tick();
}

然后，您可以将其称为 fadeIn(el, fadeOut); .

这是一个实际的示例。

function fadeIn(el, callback) {
  el.style.opacity = 0;
  el.style.display = 'block';

  var tick = function() {

    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
    }else{
        callback(el)
    }
  };

  tick();
}

function fadeOut(el) {
  el.style.opacity = 1;

  var tickOut = function() {
    el.style.opacity = +el.style.opacity - 0.01;


    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tickOut)) || setTimeout(tickOut, 2500)
    }
    else if (+el.style.opacity === 0){
    el.style.display = 'none';
    }
  };

  tickOut();
}

var el = document.getElementById("quote");
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  fadeIn(el, fadeOut);;
});

/* The CSS isn't important here. */
q{background-color: yellow;opacity:0;}

<q id="quote">"I'll appear and then disappear."</q><br>
<button id="btn">Click me to fade the quote in and out.</button>