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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3318閲覧

Vue.jsでTransitionで変な挙動をします。

MasaInns

総合スコア11

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/18 23:28

問題

Codepenサンプル

上記に問題箇所のCodepen用意しました。
これはVue.js公式のトランジションのサンプルを僅かに変えたものです(分かりやすく黒いボーダーを加えて、transitionする時間も2秒に変えています)。

「Add」をクリックすると、フワッとしたアニメーションと共にランダムにdiv要素で囲まれた数字が入ります。
それはいいのですが、「Remove」をクリックすると、黒いボーダーが崩れてクシャッと潰れてからス~と消えます。

ブロック要素であるdivに囲まれた数字が、なぜ消えるときだけinline要素のようになってから消えるのでしょうか?
display:blockと入れても、特に効果はありませんでした。

できればブロック要素のまま、ボーダーなども横幅いっぱいに広がったままス~と消えて欲しいのですが、この場合どうすればよいでしょうか?

ご存知の方どうぞよろしくお願いします。

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

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

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

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

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

sousuke

2018/09/19 01:26

ChromeでCodepenサンプルを実行しても崩れたりしませんが、なにか変更されましたか?
MasaInns

2018/09/22 00:58

ご返信送れました。いえとくに変更はしてません。chrome、win10で見ても、問題箇所は残ってるようです。
guest

回答2

0

本当の問題箇所は、当初無関係だと思っていてサンプルのcodepenには書かなかったCSSフレームワーク(Materialize.css)でした。
似たような問題に遭遇した人のために、Materialize.cssによるv-forとtransition-groupのサンプルを残しておきます。

Vue.jsとMaterialize.cssでv-forでtransition-groupを扱うとき

投稿2018/09/22 01:06

MasaInns

総合スコア11

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

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

awewewew

2018/09/22 01:28

ちょっと質問なんですが、Materialize.cssのどこに問題があったんですか? ぜひ教えていただきたいです よろしくおねがいします
MasaInns

2018/09/22 01:40 編集

普通Materialze.cssで要素を書くとき、 <div class="container"> <div class="row"> <div class="col m3">あいうえお</div> <div class="col m9">かきくけこ</div> </div> </div> ……という感じで記述しますが、 v-forで内容を回したかったので、 <div class="row" v-for="item in items"> と書いたら、配列itemsの要素を減らしたとき、トランジションアニメーションで内部の要素が一瞬inline要素のようになってグシャッと変形するようになりました。 (最初の質問内容にあるコードペンのサンプルと同じ状況です) cssでrowクラスにwidth:100%を加えてもダメでした。 細かい原因は分かりませんが、.rowで回す代わりに <div class="container" v-for="item in items"> で回したら、うまく配列itemsの要素の増減ができるようになりました。
guest

0

ベストアンサー

css

1.list-complete-leave-active { 2 position: absolute; 3}

のところを

css

1.list-complete-leave-active { 2 position: absolute; 3 width:100%; 4}

に変更するといけるかなと思います。

投稿2018/09/19 00:18

編集2018/09/19 00:28
LanHma

総合スコア192

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

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

MasaInns

2018/09/22 01:03 編集

ありがとうございます! このサンプルでは問題箇所が修正できました! ……が、実際に自分が遭遇した問題はどうも(サンプルのcodepenでは使ってませんが)CSSフレームワークのMaterialize.cssの方にあると、あとで発見しました…… 早々のお返事もありがとうございました。勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問