アプリ版：「スタンプのみでお礼する」機能のリリースについて

フォーム要素を下から上にフェードイン

解決済

  • 質問者：零礼
  • 質問日時：
  • 回答数：2件

首記の件、教えて頂きたくお願い致します。

流れとして、下記ソースコードのWebページを開いたら、
・ローディング画面が表示される
・ローディング画面が徐々に消えてフォームが表示される
※ローディング画面が消えてフォームが表示される時に、フォームが下から上にフェードインしながら表示される様にしたい　←ここで悩んでます。

CSSで#formを取得して、
opacity: 0;
transform: translateY(20px);
で要素を透明にし、要素を下にさげる

JavascriptのclassListでクラスを追加して、そのクラスにCSSを記述する
JavaScript；
window onload = function() {
const fadein = document.getElementById('form');
fadein.classList.add('fade_in');

CSS；
.fade_in {
opacity: 1;
transform: translateY(0);
で要素を不透明にし、要素を上にあげる

こうすることでフォームのid(form)からクラス(fade_in)に切り替わる事で、CSSの値が(fade_in)のCSSへと変化しフェードインを実現させようとしたのですがうまくできません。
(ローディング画面はうまくできたのですが、やり方が同じなのに出来ません)

宜しくお願い致します。

ソースコード；
★HTML；
<body>
<div id="GIF"></div>
<form action="top.html" method="POST" id="form">
<div class="question-form">
<div class="areas">
<div class="columns">会社名・団体名</div>
<div class="rows"><input type="text" name="test" class="input-text"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div>
</div>
<div class="areas">
<div class="columns">氏名(漢字)<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text2"><br>例：令和太郎)</div>
</div>
<div class="areas">
<div class="columns">氏名(フリガナ)<span class="red">(必須)</span></div>
<div class="rows"><input type="text" name="sample" class="input-text3"><br>(例：レイワタロウ))</div>
</div>
　　</div>
</form>
<script src="script.js"></script>
</body>
_____________________________________________________________________
★CSS;
#GIF {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 1s ease;
background:url(images/https___arisago.com_official_wp-content_uploads_2017_08_005.gif) center/300px no-repeat, #080403;
}

.loaded {
opacity: 0;
visibility: hidden;
}

#form {
opacity: 0.1;
transform: translateY(20px);
transition: all 3s;
}

.fade_in {
opacity: 1;
transform: translateY(0);
}
______________________________________________________________________
★JavaScript；
window.onload = function() {
const load = document.getElementById('GIF');
load.classList.add('loaded');
}
*/

window.onload = function() {
const fadein = document.getElementById('form');
fadein.classList.add('fade_in');
}

質問者からの補足コメント

  • 回答ありがとうございます。

    let loading = document.getElementById('GIF');
    document.addEventListener('DOMContentLoaded', function(){
    loading.classList.add('loaded');
    }, false);

    let fade = document.getElementById('form');
    document.addEventListener('DOMContentLoaded', function() {
    fade.classList.add('fade_in');
    }, false);

    記述してみました。
    でもこれだとイベントが不定期にしか発動せず困っています。
    毎回ページに入る度に出来る様にしたいです。

    No.1の回答に寄せられた補足コメントです。 補足日時：2020/09/30 13:00
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



気が付いた点を何点か・・・

スクリプトに「*/」だけあるので、現状ではおかしなことになっています。
（多分、コピペミスだと思いますが…）
ただし、それぞれを単独で、window.onloadで設定しようとしているフシが見られますが、後の設定で上書きされますので、後のものしか動作しなくなる可能性があります。
全体を一つのfundtionにまとめるか、または、個別に設定したいのであれば、addEventListenerを用いてバインドする必要があります。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

form要素にクラスを設定できたとしても、現状のCSSではクラスに設定したCSSは反映されません。
理由は、#formで指定しているCSSの方が詳細度が高いために、そちらが優先されるからです。
（異なる属性に対するCSSであれば反映されますけれど）
詳しくは以下を参照
https://developer.mozilla.org/ja/docs/Web/CSS/Sp …

クラス設定した時にそちらが優先されるようにしたいとして、現状のままであれば、例えば、
　.fade_in　→　#form.fade_in
としてCSSを指定することで、こちらが優先されるようになり、反映されるようになるでしょう。
この回答への補足あり
    • good
    • 0
    • 件
通報する

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



DOMContentLoadedはwindowのイベントではないのかな？
それに、ご質問の場合は画像が絡んでいるので、loadの方が良いのでは？

こんなのでもダメですか？？
window.addEventListener('load', function(){
document.getElementById('GIF').classList.add('loaded');
document.getElementById('form').classList.add('fade_in');
});
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
おかげさまでできました。
本当にありがとうございます。

通報する
お礼日時：2020/10/06 14:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報