如何使 addEventListener 同步

【问题标题】：How to make addEventListener sync如何使 addEventListener 同步
【发布时间】：2020-10-05 05:20:45
【问题描述】：

当窗口加载带有类预加载的 div 时，过渡 0.5 秒后不会消失；它立即消失。我想先用过渡 0.5s 消失，然后添加 display none

window.addEventListener('load', () => {
      $('.preload').css({
         'opacity': '0',
         'transition': '0.5s'
      });
   });
   $('.preload').css('display': 'none');

【问题讨论】：

我能看到html吗？
欢迎来到 Stack Overflow。请查看如何使用所有相关代码创建minimal reproducible example 以重现问题，以便我们查看问题所在并提供帮助。
看起来你在找api.jquery.com/fadeout

标签： javascript jquery asynchronous event-handling synchronization

【解决方案1】：

我认为这是实现这一目标的最短途径。 fadeOut 是一个 jquery 方法，它创建一个动画，用于淡化效果，并在元素完全淡化时将 display 设置为 none。参数为transition在milliseconds中的时间。

在此处查看fadeOut：fadeOut

$(window).on('load', () => {
  $('.preload').fadeOut(500);
});

html, body{
  margin: 0;
}

.preload {
  height: 200px;
  width: 100vw;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>

【讨论】：

@SamandarYusupov 我很高兴能帮上忙。不要忘记投票并标记答案正确。快乐编码:)