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

前提・実現したいこと

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

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

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

該当のソースコード

HTML
1<!DOCTYPE html>
2<html xmlns:v-on="http://www.w3.org/1999/xhtml">
3
4<head>
5    <meta charset="UTF-8">
6    <title>ああああああああああああ</title>
7    <!-- import CSS -->
8    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
9    <!-- import Vue before Element -->
10    <script src="https://unpkg.com/vue/dist/vue.js"></script>
11    <!-- 1. import Vue router -->
12    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
13    <!-- import JavaScript -->
14    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
15    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
16    <link rel="stylesheet" href="stylesheet.css">
17</head>
18
19
20<body>
21<div id="app">
22        <el-header height="350px" align="center">  <!--ヘッダーがとるスペース-->
23            <!--<img src="https://pbs.twimg.com/media/CxoliGdVEAAhEGT.jpg" height="100" align="left"> -->
24            <h1>ああああああああああああ<br>and<br>あああああああああああ</h1>
25            <p>ああああああああああああああああああああああ。</p>
26        </el-header>
27        <el-container>   <!-- ラッパーコンテナ -->
28            <el-aside width="200px">  <!--サイドバーの位置変わる-->
29                <el-col :span="24">  <!-- 列の幅 -->
30                    <el-menu default-active="1" class="el-menu-vertical-demo">  <!-- 要素の数だけ指定してる？ -->
31                        <el-menu-item index="1">
32                            <i class="el-icon-s-home"></i>
33                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
34                            <el-button @click="isOK"><router-link to="/top">top</router-link></el-button>
35                        </el-menu-item>
36                        <el-menu-item index="2">
37                            <i class="el-icon-user-solid"></i>
38                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
39                            <router-link to="/profile"><span>profile</span></router-link>
40                        </el-menu-item>
41                        <el-menu-item index="3">
42                            <i class="el-icon-edit"></i>
43                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
44                            <router-link to="/skills"><span>skills</span></router-link>
45                        </el-menu-item>
46                        <el-menu-item index="4">
47                            <i class="el-icon-monitor"></i>
48                            <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
49                            <router-link to="/outputs"><span>outputs</span></router-link>
50                        </el-menu-item>
51                    </el-menu>
52                </el-col>
53            </el-aside>
54
55            <el-main>
56                <!-- 7. The contents will be load here -->
57                <router-view></router-view>
58            </el-main>
59        </el-container>
60        <el-footer height="30px" align="left">  <!--ヘッダーがとるスペース-->
61            <p>ああああああああああああ</p>
62        </el-footer>
63</div>
64</body>
65
66<script>
67
68    // 2. ルータコンポーネント
69    const Top = { template: `<top-comp></top-comp>`}
70    const Profile = { template: '<pro-comp></pro-comp>'}
71    const Skills = { template: '<skills-comp></skills-comp>'}
72    const Outputs = { template: '<temp-comp></temp-comp>'}
73
74    // 3. Define some routes
75    const routes = [
76        { path: '/top', component: Top },
77        { path: '/profile', component: Profile },
78        { path: '/skills', component: Skills },
79        { path: '/outputs', component: Outputs }
80    ]
81
82    // 4. Create the router instance and pass the `routes` option
83    const router = new VueRouter({
84        routes // short for `routes: routes`
85    })
86
87    // 8. Define component
88    Vue.component('top-comp', {
89        template: `
90          <transition name="el-fade-in-linear"><p v-if="isOK">
91          <el-row :gutter="20">
92            <el-col :span="24"><div class="grid-content bg-purple">
93                <ul>
94                    <h2>~あああああ~</h2>
95                    <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
96                    <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
97                </ul>
98                </div></el-col>
99          </el-row></p></transition>
100  `,
101        data: function() {
102            return {isOK: false}
103        },
104        })
105
106    Vue.component('pro-comp', {
107        template: `
108          <el-row :gutter="20">
109            <el-col :span="8"><div class="grid-content bg-purple">
110                <ul>
111                    <h2>~う~</h2>
112                    <p>ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>
113                 </ul></div></el-col>
114           　<el-col :span="8"><div class="grid-content bg-purple">
115                <ul>
116                    <h2>~え~</h2>
117                    <p>えええええええええええええええええええええええええええええええええええええええええええええええええええええ</p>
118                 </ul></div></el-col>
119           　<el-col :span="8"><div class="grid-content bg-purple">
120                <ul>
121                    <h2>~お~</h2>
122                    <p>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p>
123                 </ul></div></el-col>
124          </el-row>
125  `
126    })
127
128    Vue.component('skills-comp', {
129        template: `
130          <el-row :gutter="20">
131            <el-col :span="8"><div class="grid-content bg-purple">
132                <ul>
133                    <h2>~あ~</h2>
134                    <p>ああああああああああああああああああああああああああああああああ</p>
135                 </ul></div></el-col>
136           　<el-col :span="8"><div class="grid-content bg-purple">
137                <ul>
138                    <h2>~い~</h2>
139                    <p>いいいいいいい</p>
140                 </ul></div></el-col>
141           　<el-col :span="8"><div class="grid-content bg-purple">
142                <ul>
143                    <h2>~う~</h2>
144                    <p>うううううううううううう</p>
145                 </ul></div></el-col>
146          </el-row>
147  `
148    })
149
150    Vue.component('temp-comp', {
151        template: `
152          <el-row :gutter="20">
153            <el-col :span="8"><div class="grid-content bg-purple">
154                <ul>
155                    <h2>~あ~</h2>
156                    <p>あああ</p>
157                 </ul></div></el-col>
158           　<el-col :span="8"><div class="grid-content bg-purple">
159                <ul>
160                    <h2>~あ~</h2>
161                    <p>あああ</p>
162                 </ul></div></el-col>
163           　<el-col :span="8"><div class="grid-content bg-purple">
164                <ul>
165                    <h2>~あ~</h2>
166                    <p>あああ</p>
167                 </ul></div></el-col>
168          </el-row>
169  `
170    })
171
172    ELEMENT.locale(ELEMENT.lang.en)
173    var vm = new Vue({
174        // 5. Vueインスタンスに作ったルータ渡してる
175        router,
176        el: '#app'
177    })
178</script>
179</html>

CSS
1body{
2    font-family: sans-serif;
3}
4
5.el-header{
6    padding: 30px 0 100px 0;
7    background-image: url(https://www.pakutaso.com/shared/img/thumb/PAK12_10many_TP_V.jpg);
8    background-size: cover;
9    color: aqua;
10    text-align: center;
11}
12
13.el-header h1 {
14    opacity: 0.7;
15    font-size: 45px;
16    letter-spacing: 5px;
17}
18
19.el-header p {
20    font-size: 14px;
21    margin-bottom: 35px;
22}
23
24.el-container{
25    line-height: 35px;
26}
27
28.el-row {
29    margin-bottom: 10px;
30&:last-child {
31     margin-bottom: 0;
32 }
33}
34.el-col {
35    border-radius: 4px;
36}
37.bg-purple-dark {
38    background: #99a9bf;
39}
40.bg-purple {
41    background: #d3dce6;
42}
43.bg-purple-light {
44    background: #e5e9f2;
45}
46.grid-content {
47    border-radius: 4px;
48    min-height: 36px;
49}
50.row-bg {
51    padding: 10px 0;
52    background-color: #f9fafc;
53}
54
55ul {
56    list-style: none;
57    padding-left: 5px;
58}
59
60ul h2{
61    text-align: center;
62}
63
64.el-footer{
65    opacity: 30%;
66    color: black;
67    background-color: #FFFFDD;
68    padding-bottom: 0;
69}

試したこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

でどうでしょうか？
（isOkの判定は消してください）

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

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

投稿2019/09/29 15:01

8zca

総合スコア559

emoemo

2019/09/29 23:48

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.49%

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

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

質問する

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

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