如何一次執行多個動畫

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何時完成，以便可以開始對其進行淡入淡出。 如果您總是在淡入后淡出，可以在fadeIn內調用fadeOut ，如下所示：

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

因此，您可以使用它而不是fadeIn中當前具有的if語句。

如果要使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> 

Answer 2

定義一個變量以引用requestAnimation調用。 在fadeIn和fadeOut內的else塊上調用cancelAnimationFrame 。 在displayTestimonials調用fadeIn 。 在對fadeIn else塊中的cancelAnimationFrame進行調用之后，調用fadeOut 。 在fadeOut else塊中調用displayTestimonials 。

nextIndex似乎沒有被利用。 替代

  nextIndex = randomNumber();
  while (currentIndex == nextIndex) {
    currentIndex = randomNumber();
  }

用於當前的while循環。 注意，當前的while循環不會阻止同一元素連續兩次被選擇。

  var testimonials = document.querySelectorAll('#testimonials span'); //set a starting index of 0 //Start displaying testimonials function randomNumber() { return Math.floor(testimonials.length * Math.random()); } var index = randomNumber(); displayTestimonial(index, fadeOut); function displayTestimonial(currentIndex) { //Check to see if we need to reset back to the first index nextIndex = randomNumber(); while (currentIndex == nextIndex) { currentIndex = randomNumber(); } console.log(testimonials[currentIndex]); //Display a testmonial and when testimonial is complete fade it out fadeIn(testimonials[currentIndex]); // callback(testimonials[currentIndex]); } function fadeIn(el) { el.style.opacity = 0; el.style.display = 'block'; var raf; var tick = function() { el.style.opacity = +el.style.opacity + 0.01; if (+el.style.opacity < 1) { (window.requestAnimationFrame && (raf = requestAnimationFrame(tick))) || setTimeout(tick, 2500) } else { cancelAnimationFrame(raf); console.log("fadeIn complete"); fadeOut(el) } }; tick(); } function fadeOut(el) { el.style.opacity = 1; var raf1; var tickOut = function() { el.style.opacity = +el.style.opacity - 0.01; if (+el.style.opacity > 0) { (window.requestAnimationFrame && (raf1 = requestAnimationFrame(tickOut))) || setTimeout(tickOut, 2500) } else if (+el.style.opacity === 0) { // el.style.display = 'none'; cancelAnimationFrame(raf1); console.log("fadeOut complete"); index = randomNumber(); displayTestimonial(index); } }; tickOut(); } 

 #testimonials { border-top: solid 1px #000; border-bottom: solid 1px #000; padding: 10px; text-align: center; margin: 10px; } #testimonials span { margin: 0; padding: 0; } #testimonials span { list-style-type: none; font-size: 24px; color: #001346; position: relative; margin: 0; animation: mymove 5s infinite; opacity: 1; animation-delay: 15s; /**ADD THIS TO CSS*/ display: none; } #testimonials span a { display: block; padding: 5px; background-color: #EF681F; color: #FFF; margin-top: 5px; font-size: 16px; width: 140px; margin-left: auto; margin-right: auto; } #testimonials span a:hover { text-decoration: none; background-color: #001346; } @keyframes fadeIn { to { opacity: 1; } } #testimonials span { display: none; } 

 <div id="testimonials"> <span>"Testimonials can be very powerful for helping to establish trust and encouraging visitors to take whatever action you are after." <a href = "#">Register</a></span> <span>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." <a href = "#">Register</a></span> <span>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque." <a href = "#">Register</a></span> </div> 

jsfiddle https://jsfiddle.net/cwu9sg3h/12/