如何使 addEventListener 同步

Question

當窗口加載帶有類預加載的 div 時，過渡 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>