web-dev-qa-db-ja.com

コンポーネントで「vuetify」トランジションを使用する方法は？

私はプロジェクトで Vuetifyjsライブラリ を使用しています。コンポーネントにトランジションを追加したいのですが、トランジションを開始する方法に関するドキュメントがありません。

たとえば、画面上のカードの外観にいくつかのトランジションを追加したいです。

<v-card transition="v-slide-y-transition">...</v-card>

移行を開始する方法は？

javascriptcomponentsmaterial-designvuetify.js
13
YanDatsiuk

これにより、一部のカードテキストがトランジションにラップされます。 v-show = "show"モデルをtrueにトリガーすると、テキストがスライドインします。

<v-slide-y-transition>
  <v-card-text v-show="show">
    Example text
  </v-card-text>
</v-slide-y-transition>

ボタンでトリガーするか、コンポーネントのロード後にshowをtrueにトリガーするonCreate（）メソッドを追加することもできます。

26
jordanw