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

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

ただいまの
回答率

89.72%

vue.js URLのパラメータを判断して、イントロダクションアニメーション表示/非表示判断させたい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,192

holic

score 114

前提・実現したいこと

下記仕様のイントロダクションアニメーションをvue.jsで実装しております。

仕様確認

  • example.co.jpとURLを叩いた場合(つまりサイト初訪問のときは)アニメーションを発動させる。
  • サイト内の「ホームに戻るボタン」のリンクにはexample.co.jp?visiter=ppp(./?visiter=ppp) とパラメータを付与させておき、パラメータを持っているときはアニメーションをさせない。

改善したいこと

  • 下記に私のjsを載せました、パラメータを持っているときはアニメーションは表示されないように記述したのですが、mountedにてパラメータ判断をしているために一瞬アニメーションが見えてしまいます。
    createdにて、DOMが作られる前にパラメータ判断すればよいかと思い書き換えましたが、今度は「document.getElementById("app").style.display = "none";」が生成される前なので、createdの挙動は実行されませんでした。

①createdにてもしくはbeforeCreatedに書き換えたい。
②createdにした場合、elementの#appにはどうやってアクセスするのか。方法を知りたい。
③#appをどのように消せばよいのか(display:noneすればよいのか)

下記にソースを表示させます。

        <div id="app">
            <transition-group name="fade" mode="out-in" tag="div" id="introdauction">
                <div v-show="loading_title01" id="loading_title01" class="loading" key="key1">
                    <div class="loadbox">
                        <h2 id="load_title"><img src="./images/loading_text01.png"></h2>
                    </div>
                </div>

                <div v-show="loading_title02" id="loading_title02" class="loading" key="key2">
                    <div class="loadbox">
                        <h2 id="load_title"><img src="./images/loading_text02.png""></h2>
                    </div>
                </div>

                <div v-show="loading_logo" id="loading_logo" class="loading" key="key3">
                    <div class="loadbox">
                        <p class="load_left"><img src="./images/loading_01.png"></p>
                    </div>
                </div>
                <div v-show="loading_bg_white" id="loading_bg_white" class="loading" key="loading_bg_white"></div>
            </transition-group>
        </div>
<header id="header">
~~これ以下は常に表示させたいhtml~~~
'use strict';


// vue設定(ローディング)
var app = new Vue({
    el: '#app',
    data: function data() {
        return {
            loading_title01: true,
            loading_title02: false,
            loading_logo: false,
            loading_bg_white: true,
        };
    },
    mounted: function mounted() {

        this.urlQueryCheck(),
            this.mountedHakka()
    },

    methods: {
        //URLのqueryをチェックする。PPPが入っていたらloading無し
        urlQueryCheck: function urlQueryCheck() {
            var urlParam = location.search.substring(1);
            var paramArray = [];

            // パラメータが存在確認、無ければ何もしない
            if (urlParam) {
                // 「&」が含まれている場合は「&」で分割
                var param = urlParam.split('&');
                // パラメータを格納する用の配列を用意
                // 用意した配列にパラメータを格納
                for (var i = 0; i < param.length; i++) {
                    var paramItem = param[i].split('=');
                    paramArray[paramItem[0]] = paramItem[1];
                }

                if (paramArray.visiter === "ppp") {
                    document.getElementById("app").style.display = "none";
                }

            }
        },

        //文章その1を表示とフェイドアウト
        mountedHakka: function mountedHakka() {
            var _this = this;

            setTimeout(function () {
                _this.loading_title01 = false;
                _this.loading_title02 = true;
            }, 2600);
        },

    },

    watch: {
        //文章その2を表示とフェイドアウト
        loading_title02: function () {
            var _this4 = this;
            if (this.loading_title02 === true) {
                setTimeout(function () {
                    _this4.loading_title02 = false;
                    _this4.loading_logo = true;
                }, 2600);
            }
        },

        //LOGOを表示とフェイドアウト
        loading_logo: function () {
            var _this1 = this;
            if (this.loading_logo === true) {
                setTimeout(function () {
                    _this1.loading_logo = false;
                    _this1.loading_bg_white = false;
                }, 3100);
            }
        },
    }
});

vue.jsとjavascriptに詳しい方、お手数ではございますが、ご教示お願い致します。

補足情報(FW/ツールのバージョンなど)

vue.js 2.5.17

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 89.72%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる