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

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

ただいまの
回答率

87.37%

VueのElementでtransitionを用いた初歩的なアニメーションができない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,363

score 9

前提・実現したいこと

CDNでVue.js、vue-router、Elementを使いながら自己紹介ページを作ろうとしていて、現状のコードだと、画面の左の文字を押したときにtop、profile、skills、outputsをSPAで切り替えることはできます。そこで、それらをボタンにして押したときにtransitionでそれぞれの3つの紫の要素をゆっくり登場させるアニメーションで表示させたいです。

発生している問題・エラーメッセージ

まずtopをボタンにしてクリックしたときのtrue/falseの切り替えで実現しようとしたのですが、クリックしても<router-view></router-view>に表示したい要素が表示できません。

該当のソースコード

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>ああああああああああああ</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 1. import Vue router -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
</head>


<body>
<div id="app">
        <el-header height="350px" align="center">  <!--ヘッダーがとるスペース-->
            <!--<img src="https://pbs.twimg.com/media/CxoliGdVEAAhEGT.jpg" height="100" align="left"> -->
            <h1>ああああああああああああ<br>and<br>あああああああああああ</h1>
            <p>ああああああああああああああああああああああ。</p>
        </el-header>
        <el-container>   <!-- ラッパーコンテナ -->
            <el-aside width="200px">  <!--サイドバーの位置変わる-->
                <el-col :span="24">  <!-- 列の幅 -->
                    <el-menu default-active="1" class="el-menu-vertical-demo">  <!-- 要素の数だけ指定してる? -->
                        <el-menu-item index="1">
                            <i class="el-icon-s-home"></i>
                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
                            <el-button @click="isOK"><router-link to="/top">top</router-link></el-button>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-user-solid"></i>
                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
                            <router-link to="/profile"><span>profile</span></router-link>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-edit"></i>
                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
                            <router-link to="/skills"><span>skills</span></router-link>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-monitor"></i>
                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
                            <router-link to="/outputs"><span>outputs</span></router-link>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>

            <el-main>
                <!-- 7. The contents will be load here -->
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-footer height="30px" align="left">  <!--ヘッダーがとるスペース-->
            <p>ああああああああああああ</p>
        </el-footer>
</div>
</body>

<script>

    // 2. ルータコンポーネント
    const Top = { template: `<top-comp></top-comp>`}
    const Profile = { template: '<pro-comp></pro-comp>'}
    const Skills = { template: '<skills-comp></skills-comp>'}
    const Outputs = { template: '<temp-comp></temp-comp>'}

    // 3. Define some routes
    const routes = [
        { path: '/top', component: Top },
        { path: '/profile', component: Profile },
        { path: '/skills', component: Skills },
        { path: '/outputs', component: Outputs }
    ]

    // 4. Create the router instance and pass the `routes` option
    const router = new VueRouter({
        routes // short for `routes: routes`
    })

    // 8. Define component
    Vue.component('top-comp', {
        template: `
          <transition name="el-fade-in-linear"><p v-if="isOK">
          <el-row :gutter="20">
            <el-col :span="24"><div class="grid-content bg-purple">
                <ul>
                    <h2>~あああああ~</h2>
                    <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
                    <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
                </ul>
                </div></el-col>
          </el-row></p></transition>
  `,
        data: function() {
            return {isOK: false}
        },
        })

    Vue.component('pro-comp', {
        template: `
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~う~</h2>
                    <p>ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~え~</h2>
                    <p>えええええええええええええええええええええええええええええええええええええええええええええええええええええ</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~お~</h2>
                    <p>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p>
                 </ul></div></el-col>
          </el-row>
  `
    })

    Vue.component('skills-comp', {
        template: `
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~あ~</h2>
                    <p>ああああああああああああああああああああああああああああああああ</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~い~</h2>
                    <p>いいいいいいい</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~う~</h2>
                    <p>うううううううううううう</p>
                 </ul></div></el-col>
          </el-row>
  `
    })

    Vue.component('temp-comp', {
        template: `
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~あ~</h2>
                    <p>あああ</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~あ~</h2>
                    <p>あああ</p>
                 </ul></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
                <ul>
                    <h2>~あ~</h2>
                    <p>あああ</p>
                 </ul></div></el-col>
          </el-row>
  `
    })

    ELEMENT.locale(ELEMENT.lang.en)
    var vm = new Vue({
        // 5. Vueインスタンスに作ったルータ渡してる
        router,
        el: '#app'
    })
</script>
</html>
body{
    font-family: sans-serif;
}

.el-header{
    padding: 30px 0 100px 0;
    background-image: url(https://www.pakutaso.com/shared/img/thumb/PAK12_10many_TP_V.jpg);
    background-size: cover;
    color: aqua;
    text-align: center;
}

.el-header h1 {
    opacity: 0.7;
    font-size: 45px;
    letter-spacing: 5px;
}

.el-header p {
    font-size: 14px;
    margin-bottom: 35px;
}

.el-container{
    line-height: 35px;
}

.el-row {
    margin-bottom: 10px;
&:last-child {
     margin-bottom: 0;
 }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

ul {
    list-style: none;
    padding-left: 5px;
}

ul h2{
    text-align: center;
}

.el-footer{
    opacity: 30%;
    color: black;
    background-color: #FFFFDD;
    padding-bottom: 0;
}

試したこと

フラグであるisOKの宣言場所を色々変えて試したり、transitionとv-ifで囲う範囲を色々変えましたがうまくいきません...

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

同じtransitionをどのページでも行うのでしたら、

<transition name="el-fade-in-linear" mode="out-in">
  <router-view></router-view>
</transition>


でどうでしょうか?
(isOkの判定は消してください)

また、router-linkをボタンにしたい場合は、router-linkの中にel-buttonを置けば@clickをハンドリングする必要はなくなると思います。

<router-link to="/top"><el-button>Top</el-button></router-link>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/30 08:48

    まさにout-inを使った処理が求めていたものだったので解決しました。8zcaさん、ご親切な回答ありがとうございました。

    キャンセル

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

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

関連した質問

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