如何使用 pure javascript 将 fadein 添加到此脚本

Question

我使用了本网站的淡入效果 http://youmightnotneedjquery.com/ 我想做的是缓慢显示模式（使用这种淡入效果）。但问题是我不知道该把这个功能放在哪里。我可能什么都试过了。

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

还有我的剧本

// Get the modal
var modal'.$post->id.' = document.getElementById("myModal'.$post->id.'");

// Get the button that opens the modal
var btn = document.getElementById("myBtn'.$post->id.'");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close'.$post->id.'")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal'.$post->id.'.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal'.$post->id.'.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";

    }
}

我想做的是将这个淡入添加到这部分代码中，但我不知道如何正确地做到这一点

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal'.$post->id.'.style.display = "block";
}

Answer 1

我经常使用这个简单的库来制作动画。只需从 github 下载 animate.min.css 即可 https://github.com/daneden/animate.css 将其添加到页面的头部，如下所示：

  <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

然后你可以像这样将它添加到你的脚本中。

$('#yourElement').addClass('animated fadeOut');

或

modal'.$post->id.'.classList.add('animated fadeOut');

希望对您有所帮助？

如何使用 pure javascript 将 fadein 添加到此脚本

How to add fadein to this script with pure javascript

javascript

fadein