質問編集履歴

3

追記

2021/06/03 03:42

投稿

SideRiver
SideRiver

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,12 @@
1
+ vue3でSPAを制作しています。
2
+
1
- vue3でv-showやv-ifで切り替え表示した要素に対してtransitionをかけるため以下のようなコードを書きました。
3
+ v-showやv-ifで切り替え表示したコンポーネントの表示対してtransitionをかけるため以下のようなコードを書きました。
4
+
5
+ ・表示されなくなる時
6
+
7
+ ・表示される時
8
+
9
+ に透明度が変わっていくことを意図したコードです。
2
10
 
3
11
 
4
12
 

2

追記

2021/06/03 03:42

投稿

SideRiver
SideRiver

スコア2

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,124 @@
72
72
 
73
73
  ```
74
74
 
75
+ 【追記】
76
+
77
+ ブラウザ上での表示はこうなっていました。
78
+
79
+ 初期画面時
80
+
81
+ ```html
82
+
83
+ <html lang>
84
+
85
+ <head></head>
86
+
87
+ <body>
88
+
89
+ <noscript></noscript>
90
+
91
+ <div id="app" data-v-app>
92
+
93
+ <div class="TopPage" tag="div" data-v-7ba5bd90>
94
+
95
+ <p class="click abs">DoubleClick</p>
96
+
97
+ <h1 class="abs">
98
+
99
+ <br>
100
+
101
+ "Website"
102
+
103
+ </h1>
104
+
105
+ <div class="gradientCircle abs"></div>
106
+
107
+ <img />
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ </body>
114
+
115
+ </html>
116
+
117
+ ```
118
+
119
+ 遷移時
120
+
121
+ ```html
122
+
123
+ <html lang>
124
+
125
+ <head></head>
126
+
127
+ <body>
128
+
129
+ <noscript></noscript>
130
+
131
+ <div id="app" data-v-app>
132
+
133
+ <div class="TopPage message-leave-active message-leave-to" tag="div" data-v-7ba5bd90>
134
+
135
+ <p class="click abs">DoubleClick</p>
136
+
137
+ <h1 class="abs">
138
+
139
+ <br>
140
+
141
+ "Website"
142
+
143
+ </h1>
144
+
145
+ <div class="gradientCircle abs"></div>
146
+
147
+ <img />
148
+
149
+ </div>
150
+
151
+ <div tag="div" data-vba5bd90 class="message-enter-active message-enter-to">
152
+
153
+ </div>
154
+
155
+ </body>
156
+
157
+ </html>
158
+
159
+ ```
160
+
161
+ 遷移後
162
+
163
+ ```html
164
+
165
+ <html lang>
166
+
167
+ <head></head>
168
+
169
+ <body>
170
+
171
+ <noscript></noscript>
172
+
173
+ <div id="app" data-v-app>
174
+
175
+ <div tag="div" data-vba5bd90 class>...</div>
176
+
177
+ </div>
178
+
179
+ </body>
180
+
181
+ </html>
182
+
183
+ ```
184
+
185
+ 上記の移り変わりがわかりにくそうだったので画面録画をyoutubeに載せました
186
+
187
+ [こちら](https://youtu.be/OkGJzlYmTPg)からご覧いただけるとありがたいです。
188
+
189
+
190
+
191
+
192
+
75
193
  上記のコードでは<TopPage>のleave時以外にはtransitionが効いているように見えませんでした。
76
194
 
77
195
  Vue3のドキュメントを見たのですが解決に至らなかったため教えていただきたいです

1

追記

2021/06/03 02:51

投稿

SideRiver
SideRiver

スコア2

test CHANGED
File without changes
test CHANGED
@@ -75,3 +75,7 @@
75
75
  上記のコードでは<TopPage>のleave時以外にはtransitionが効いているように見えませんでした。
76
76
 
77
77
  Vue3のドキュメントを見たのですが解決に至らなかったため教えていただきたいです
78
+
79
+
80
+
81
+ エラーメッセージは出ていません