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