質問編集履歴
5
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -44,7 +44,9 @@
|
|
|
44
44
|
|
|
45
45
|
の方が処理として正しいと思うのですが、、
|
|
46
46
|
|
|
47
|
-
なぜcssの
|
|
47
|
+
なぜcssのデュレーションの秒数を書くとアニメーションが綺麗に終わるまで待ってくれるのでしょうか？
|
|
48
|
+
|
|
49
|
+
nuxt/vueのtransitionの機能はページ遷移時にcalssを付与するだけでなく、裏でページ読み込みをデュレーション時間分ずらす。のような処理がなされているのでしょうか？
|
|
48
50
|
|
|
49
51
|
|
|
50
52
|
|
4
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
・リンクをクリックすると
|
|
29
|
+
・リンクをクリックするとhtmlは現ページのままopacityが１秒間かけて0になり、
|
|
30
30
|
|
|
31
|
-
次のページの
|
|
31
|
+
次のページのhtmlに切り替わるとopacityが１秒間かけて1になる。
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
この理屈がよくわからないです。
|
|
36
36
|
|
|
37
|
-
本来リンクがクリックされたら
|
|
37
|
+
本来リンクがクリックされたら遷移先のhtmlにすぐ切り替わるので、
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
・リンクをクリックすると
|
|
41
|
+
・リンクをクリックするとhtmlが切り替わると同時にopacityが1秒間かけて0になっていく。
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
3
内容変更しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
nuxt.js
|
|
1
|
+
nuxt.js/vue.js ページ遷移時のtransitionについて
|
test
CHANGED
|
@@ -1,27 +1,51 @@
|
|
|
1
|
-
nuxt
|
|
1
|
+
nuxt/vueのページ遷移時にclassが付与されるtransitionについて質問です。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
```css
|
|
6
|
+
|
|
5
|
-
|
|
7
|
+
.page-enter-active, .page-leave-active {
|
|
8
|
+
|
|
9
|
+
transition: opacity 1s
|
|
10
|
+
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.page-enter, .page-leave-to {
|
|
14
|
+
|
|
15
|
+
opacity: 0
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
```
|
|
6
20
|
|
|
7
21
|
|
|
8
22
|
|
|
9
|
-
|
|
23
|
+
routerを通してページが遷移する際、opacityをつけたいとして上記のようなcssを書いたとします。
|
|
10
24
|
|
|
11
|
-
|
|
25
|
+
cssを設定しなかった場合、リンクをクリックしたと同時に次のページの内容に切り替わると思うのですが、
|
|
12
26
|
|
|
13
27
|
|
|
14
28
|
|
|
15
|
-
|
|
29
|
+
・リンクをクリックすると内容が現ページのままopacityが１秒間かけて0になり、
|
|
30
|
+
|
|
31
|
+
次のページの内容に切り替わるとopacityが１秒間かけて1になる。
|
|
16
32
|
|
|
17
33
|
|
|
18
34
|
|
|
19
|
-
|
|
35
|
+
この理屈がよくわからないです。
|
|
20
36
|
|
|
21
|
-
|
|
37
|
+
本来リンクがクリックされたら内容が即切り替わるので、
|
|
22
38
|
|
|
23
39
|
|
|
24
40
|
|
|
25
|
-
|
|
41
|
+
・リンクをクリックすると内容が切り替わると同時にopacityが1秒間かけて0になっていく。
|
|
26
42
|
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
の方が処理として正しいと思うのですが、、
|
|
46
|
+
|
|
27
|
-
|
|
47
|
+
なぜcssのtransitionのデュレーションの秒数を設定すると、htmlの切り替わりまで時間制御できるのでしょうか？
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
そもそもの認識が間違っているのでしょうか。。
|
2
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,4 +24,4 @@
|
|
|
24
24
|
|
|
25
25
|
(追記)
|
|
26
26
|
|
|
27
|
-
ページ遷移時に次のページの頭にスクロールを戻したい場合、それように設定を書く必要があったと記憶してい
|
|
27
|
+
ページ遷移時に次のページの頭にスクロールを戻したい場合、それように設定を書く必要があったと記憶していたのですが、現在のバージョンはデフォルトで頭に飛ぶようになったのでしょうか？
|
1
追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -19,3 +19,9 @@
|
|
|
19
19
|
アドバイスいただけると幸いです。
|
|
20
20
|
|
|
21
21
|
よろしくお願いします。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
(追記)
|
|
26
|
+
|
|
27
|
+
ページ遷移時に次のページの頭にスクロールを戻したい場合、それように設定を書く必要があったと記憶しているのですが、現在デフォルトで頭に飛ぶようになったのでしょうか？
|