質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

ローダーがページ遷移するときに発生しないようにしたい

amagiri
amagiri

総合スコア61

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

129閲覧

投稿2022/06/26 11:22

前提・実現したいこと

四角形の黒い図形が回転するローダーを組んでいるんですが、別のページからトップページに飛ぶ時も毎回ローダーが出てきてしまいます。ページ遷移するときはローダーが出てこないようにする方法はないでしょうか。

該当のソースコード

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。