如何使 addEventListener 同步

Question

当 window 加载 div 时 class 预加载不会随着过渡 0.5s 消失；它立即消失。我想先用过渡 0.5s 消失然后添加显示 none

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

Answer 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>

如何使 addEventListener 同步

How to make addEventListener sync

javascript

jquery

synchronization

asynchronous

event-handling