web-dev-qa-db-ja.com

v-flexの遷移をvuetify

私はこのようにトランジションを実装しようとしています codepen example ですが、Vuetifyを使用しています。

V-flexコンポーネントがv-flex注文を破壊する前に遷移タグを追加することに気づきました。この例 codesandbox には2つのルートがあり、1つは遷移あり、もう1つは遷移なしです。

コンポーネントの構造は次のとおりです。

<v-container>
  <v-layout row wrap pb-2 pt-2>
  <!-- is transition group -->
  <transition-group name="cards" >
    <v-flex xs3
        v-for="card in items"
        :key="card"
        >
        <v-layout>
          <v-card>
            .....
          </v-card>  
        </v-layout>
      </v-flex>
    </transition-group>
  </v-layout>
</v-container>
vue.jstransitionsvuetify.js
6
Dmitriy Karpovich

ジェイコブゴーの答えが機能しなかったので、彼の答えを参考にして調整し、これを解決策として思いつきました。

<template>
...
  <transition-group name="cards" tag="div" class="layout row wrap">
    ...
  </transition-group>
...
</template>

Transition-groupタグをdivに設定し、それに適切なクラスを割り当てます。

5
Crazy World

transition-groupは実際の要素をレンダリングします。デフォルトでは<span>です。そのため、v-layoutとv-flexの間に余分なspanがあります。これにより、flexboxが誤動作します。

transition-groupは何かをレンダリングする必要があります。 spanではなくv-layoutをレンダリングするように設定できます。

[〜＃〜] but [〜＃〜]、transition-groupには制限があります。 tagは設定できますが、propsは設定できません。したがって、row wrap pb-2 pt-2の場合は、CSSを使用して手動で追加する必要があります。

変化する

<template>
    ...
    <v-layout row wrap pb-2 pt-2>
        <transition-group name="cards">
            ...
        </transition-group>
    </v-layout>
    ...
</template>

に

<template>
    ...
    <transition-group name="cards" tag="v-layout" class="manual-v-layout">
        ...
    </transition-group>
    ...
</template>


<style>
.manual-v-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}
</style>

そしてそれはうまくいくでしょう。

デモ： https://codesandbox.io/s/z2z5yoopol

4
Jacob Goh