質問編集履歴
4
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -68,6 +68,14 @@
|
|
|
68
68
|
|
|
69
69
|
```css
|
|
70
70
|
|
|
71
|
+
.v-enter {
|
|
72
|
+
|
|
73
|
+
opacity: 1;
|
|
74
|
+
|
|
75
|
+
transform: translateY(200px);
|
|
76
|
+
|
|
77
|
+
}
|
|
78
|
+
|
|
71
79
|
.v-leave-to {
|
|
72
80
|
|
|
73
81
|
opacity: 1;
|
3
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
以下のサンプルコードを写経していました。`v-leave-to` で `translateX` を指定していないにも関わらず、文字が消える時
|
|
1
|
+
以下のサンプルコードを写経していました。`v-leave-to` で `translateX` を指定していないにも関わらず、文字が消える時に左右方向に動作しています。
|
|
2
2
|
|
|
3
3
|
* [基礎から学ぶ Vue.js > 実例集 > テキストアニメーション > TextAnime3](https://cr-vue.mio3io.com/examples/text-animation.html)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
その動作を定義している箇所があるのではないかと思い探しているのですが、見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけないでしょうか。
|
|
4
8
|
|
|
5
9
|
|
|
6
10
|
|
2
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
以下のサンプルコードを写経していました。
|
|
1
|
+
以下のサンプルコードを写経していました。`v-leave-to` で `translateX` を指定していないにも関わらず、文字が消える時の左右方向の動作を定義しているところが見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけないでしょうか。
|
|
2
2
|
|
|
3
3
|
* [基礎から学ぶ Vue.js > 実例集 > テキストアニメーション > TextAnime3](https://cr-vue.mio3io.com/examples/text-animation.html)
|
|
4
4
|
|
|
@@ -8,21 +8,25 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
## サンプルコードの概要
|
|
11
|
+
### サンプルコードの概要
|
|
12
12
|
|
|
13
13
|
ここで例示されている TextAnime3 という Single File Component は、だいたい次のような動作をしています。
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
1. 同じ文字が
|
|
17
|
+
1. 同じ文字がなければ、古い文字は 30px 上へとふわと消えていく。
|
|
18
18
|
|
|
19
|
-
2. 新しい文字は 30px 上から下にふわっと表示される。
|
|
19
|
+
2. 同じ文字がなければ、新しい文字は 30px 上から下にふわっと表示される。
|
|
20
20
|
|
|
21
|
-
3. 古い文字は
|
|
21
|
+
3. 同じ文字があれば、古い文字は、新しい場所へと移動する。
|
|
22
|
+
|
|
23
|
+
4. 同じ文字があれば、新しい文字は、古い文字から移動する。
|
|
22
24
|
|
|
23
25
|
|
|
24
26
|
|
|
27
|
+
#### 同じ文字がなかった場合の動作
|
|
28
|
+
|
|
25
|
-
CSS
|
|
29
|
+
CSS で、次のように定義されています。
|
|
26
30
|
|
|
27
31
|
```css
|
|
28
32
|
|
|
@@ -40,9 +44,15 @@
|
|
|
40
44
|
|
|
41
45
|
|
|
42
46
|
|
|
47
|
+
#### 同じ文字があった場合の動作
|
|
48
|
+
|
|
49
|
+
説明を割愛させていただきます。
|
|
43
50
|
|
|
44
51
|
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
45
|
-
## サンプルコードの疑問点
|
|
55
|
+
### サンプルコードの疑問点
|
|
46
56
|
|
|
47
57
|
しかし、動作を見ていて気づいたのですが、古い文字が消えるとき、単純に上にふわっと消えるだけではなく、`translateX` を指定していないにも関わらず。左右の方向にも移動しています。CodePen に記述しました。
|
|
48
58
|
|
|
@@ -68,6 +78,6 @@
|
|
|
68
78
|
|
|
69
79
|
|
|
70
80
|
|
|
71
|
-
## 伺いたいこと
|
|
81
|
+
### 伺いたいこと
|
|
72
82
|
|
|
73
83
|
サンプルコードを見ていても、左右方向の動作を定義しているところが見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけると幸いでございます。
|
1
誤字
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Vue の v-lea
|
|
1
|
+
Vue の v-leave-to につきまして
|
test
CHANGED
|
File without changes
|