@alisa.bahringer

Функции fadein и fadeout реализуют анимацию появления и исчезновения элементов на веб-странице. Вот, как их можно переписать на нативном JavaScript:

function fadeIn(element, duration) {
  element.style.opacity = 0;
  element.style.display = 'block'; // Показываем элемент перед анимацией

  var start = performance.now();

  function animate(timestamp) {
    var progress = timestamp - start;
    element.style.opacity = progress / duration;

    if (progress < duration) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

function fadeOut(element, duration) {
  var start = performance.now();

  function animate(timestamp) {
    var progress = timestamp - start;
    element.style.opacity = 1 - progress / duration;

    if (progress < duration) {
      requestAnimationFrame(animate);
    } else {
      element.style.display = 'none'; // Скрываем элемент после анимации
    }
  }

  requestAnimationFrame(animate);
}

Пример использования данных функций:

var element = document.getElementById('myElement');

// Появление элемента в течение 1 секунды
fadeIn(element, 1000);

// Исчезновение элемента в течение 500 миллисекунд
fadeOut(element, 500);

Эти функции используют requestAnimationFrame, чтобы достичь плавной анимации, и performance.now() для определения времени начала анимации. При вызове функции fadeIn, элемент сначала скрыт (display: none), а затем отображается перед анимацией. При вызове функции fadeOut, элемент исчезает после окончания анимации, устанавливая стиль display обратно на none.

#fadeinfadeout