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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

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

受付中

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

holic
holic

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

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

0回答

0評価

0クリップ

2167閲覧

投稿2018/12/16 11:12

前提・実現したいこと

下記仕様のイントロダクションアニメーションを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すればよいのか)

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

html

<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~~~

js

'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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

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