requestFrameAnimation изменяет длительность

Question

Я пишу функцию fadeIn для HTMLElement, анимация работает, но на данный момент она немного прерывистая.то, что он делает, это анимирует fadeIn от 0 непрозрачности до 1, он также анимирует в течение продолжительности, используя requestFrameAnimation, поэтому он, вероятно, настолько изменчив, может кто-нибудь помочь мне сделать мою анимацию более плавной.и пример на codepen.io посмотрите на заголовок fadeIn и посмотрите, что я имею в виду

fadeIn: function(duration) {

    var el = this.$el,
      duration,
      end = 0;

    el.style.opacity = 0;
    el.style.display = "block";

    var step = function() {
      var current = +new Date(),
          remaining = end - current;
      if(remaining < 60) {
        if(el) {
          end = current + duration;

          var val = parseFloat(el.style.opacity);
          if (!((val += .1) > 1)) {
            el.style.opacity = val;
          }
        } else {
          return;
        }
      }

      requestAnimationFrame(step);
    };

    step();
  },

Answer 1

Самое гладкое, что вы можете сделать, это использовать CSS-переход. Но если вы хотите сделать с чистым Javascript, вы можете сделать что-то вроде этого

function fadeIn(dom, duration) {
  let start = null;

  const step = (end) => {
    if (start === null) start = end;
    let dt = end - start;
    dom.style.opacity = Math.min(1, dt / duration);
    if (dt < duration) requestAnimationFrame(step);
  }

  requestAnimationFrame(step);
}

function fadeOut(dom, duration) {
  let start = null;

  const step = (end) => {
    if (start === null) start = end;
    let dt = end - start;
    dom.style.opacity = Math.max(0, 1 - dt / duration);
    if (dt < duration) requestAnimationFrame(step);
  }

  requestAnimationFrame(step);
}

fadeIn(document.getElementById('your_dom'), 2000);