以下のサンプルコードを写経していました。v-leave-to
で translateX
を指定していないにも関わらず、文字が消える時に左右方向に動作しています。
その動作を定義している箇所があるのではないかと思い探しているのですが、見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけないでしょうか。
サンプルコードの概要
ここで例示されている TextAnime3 という Single File Component は、だいたい次のような動作をしています。
- 同じ文字がなければ、古い文字は 30px 上へとふわと消えていく。
- 同じ文字がなければ、新しい文字は 30px 上から下にふわっと表示される。
- 同じ文字があれば、古い文字は、新しい場所へと移動する。
- 同じ文字があれば、新しい文字は、古い文字から移動する。
同じ文字がなかった場合の動作
CSS で、次のように定義されています。
css
1.v-enter, 2.v-leave-to { 3 opacity: 0; 4 transform: translateY(-30px); 5}
同じ文字があった場合の動作
説明を割愛させていただきます。
サンプルコードの疑問点
しかし、動作を見ていて気づいたのですが、古い文字が消えるとき、単純に上にふわっと消えるだけではなく、translateX
を指定していないにも関わらず。左右の方向にも移動しています。CodePen に記述しました。
以下の CSS を追記して、目立つようにしています。
css
1.v-enter { 2 opacity: 1; 3 transform: translateY(200px); 4} 5.v-leave-to { 6 opacity: 1; 7 transform: translateY(-200px); 8}
伺いたいこと
サンプルコードを見ていても、左右方向の動作を定義しているところが見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけると幸いでございます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/02 03:18
2019/03/02 04:39
2019/03/02 18:09