Как переписать функции fadein, fadeout в нативном javascript?

Пользователь

от alisa.bahringer , в категории: JavaScript , 6 месяцев назад

Как переписать функции fadein, fadeout в нативном javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jerrold_langworth , 6 месяцев назад

@alisa.bahringer 

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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);
}


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

1
2
3
4
5
6
7
var element = document.getElementById('myElement');

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

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


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