前提・実現したいこと
四角形の黒い図形が回転するローダーを組んでいるんですが、別のページからトップページに飛ぶ時も毎回ローダーが出てきてしまいます。ページ遷移するときはローダーが出てこないようにする方法はないでしょうか。
該当のソースコード
HTML
<div id="loader" class="loader active"> <div class="loader-item"></div> </div>
SCSS
@mixin animation ( $name, $duration: 1s, $delay: 0s, $iteration-count: 1, $timing-function: ease, $direction: normal, $fill-mode: forwards ) { animation: { name: $name; duration: $duration; delay: $delay; iteration-count: $iteration-count; timing-function: $timing-function; direction: $direction; fill-mode: $fill-mode; } } .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 30px; background: white; z-index: 100; opacity: 0; transition: .5s; perspective: 120px; perspective-origin: center center; display: flex; justify-content: center; align-items: center; visibility: hidden; } .loader.active { opacity: 1; visibility: visible; } .loader.active .loader-item { width: 50px; height: 50px; background:rgba(0, 0, 0); @include animation ( $name: loaderSquare, $duration: 1s, $iteration-count: infinite, $timing-function: ease-in-out ); } @keyframes loaderSquare { 0% { transform: rotate(0); } 50% { transform: rotateX(-180deg); } 100% { transform: rotateX(-180deg) rotateY(-180deg); } }
javaScript
function loaderAnimation () { const loaderElement = document.querySelector('#loader'); loaderElement.classList.remove('active'); } window.addEventListener('DOMContentLoaded', function(){ setTimeout(loaderAnimation, 2000) }, {once: true});
試したこと
once: trueを使いましたが、何も変わりませんでした。
補足情報(FW/ツールのバージョンなど)
Macbook Air M1
まだ回答がついていません
会員登録して回答してみよう