Как переписать функции 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);