如何使addEventListener同步

Question

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

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

Answer 1

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

点击此处查看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>

​