質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

445閲覧

Vue の v-leave-to につきまして

nico25

総合スコア830

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/02/28 15:16

編集2019/02/28 15:53

以下のサンプルコードを写経していました。v-leave-totranslateX を指定していないにも関わらず、文字が消える時に左右方向に動作しています。

その動作を定義している箇所があるのではないかと思い探しているのですが、見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけないでしょうか。

サンプルコードの概要

ここで例示されている TextAnime3 という Single File Component は、だいたい次のような動作をしています。

  1. 同じ文字がなければ、古い文字は 30px 上へとふわと消えていく。
  2. 同じ文字がなければ、新しい文字は 30px 上から下にふわっと表示される。
  3. 同じ文字があれば、古い文字は、新しい場所へと移動する。
  4. 同じ文字があれば、新しい文字は、古い文字から移動する。

同じ文字がなかった場合の動作

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}

伺いたいこと

サンプルコードを見ていても、左右方向の動作を定義しているところが見当たらず苦慮しております。何か、思い当たるものがございましたら、ご教示いただけると幸いでございます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

リンク先のサイトに

transition-group の v-move を利用してゴニョゴニョしている

とあるように、vueに組み込まれた機能ですので、vue本体の中身でv-moveを定義している部分を探すとどういう処理をしてるかわかるかとおもいます。
(そもそも文章で一文字ごとに動きを制御するのはCSSでは不可能です)

投稿2019/03/01 15:59

yu-smc

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nico25

2019/03/02 03:18

v-move 本体の定義となると、結構調べないと厳しそうですね。 いつかレベルアップする時まで間違いと思います。 ご回答いただき、ありがとうございます。
yu-smc

2019/03/02 04:39

vue公式にも、Velocity.js のようなサードパーティの JavaScript アニメーションライブラリと連携します。との記述があったので、さらに外側まで調べないといけなさそうです。 おおかた、文字列を一文字ずつ取り出して、同じ文字が存在するかなどの判定をする&個別に操作できるようDOM要素として形成してCSSアニメーションで動かすかんじかなとは推測できますが・・。
nico25

2019/03/02 18:09

ご教示いただきありがとうございます。 全くの門外漢なので、指針を示していただき本当に助かります。 教えていただいた内容を元に、精進してまいりたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問