web-dev-qa-db-ja.com

ページ遷移を評価する方法は？

Spa vue vuetifyのあるページがあり、アプリケーションのコンポーネント間を変更したときに、コンポーネントが遷移を表示するようにしたい。<v-slide-y-transition>タグとtransition="slide-y-transition属性ですが、機能しません。ここで私が試したもののいくつかの例：

「vuetifyタグ」の例：

    <template>
      <v-app>
        <v-slide-y-transition>
          <h1>Test</h1>
        </v-slide-y-transition>
      </v-app>
    </template>

属性の例：

   <template>
      <v-app>
        <div transition="slide-y-transition">
          <h1>Test</h1>
        </div>
      </v-app>
   </template>
javascriptanimationvue.jsstylestransitions
7
Perropolesia

Vuetifyトランジションは、Vuetifyライブラリコンポーネントでのみ機能します。例：<v-menu transition="slide-x-transition">v-menuはコンポーネントの1つです。単純な<div>では、このようにトランジションを使用することはできません。

ただし、Vue.js自体は次の形式を使用して transitions をサポートしています。

<transition name="slide">
    <div> element you are apply the transition to</div>
</transition>

ドキュメンテーション here。 に従って遷移のcssを定義する必要があります。または Animate.css のようなcssライブラリを使用できます。

ドキュメントのCSSの例：

.slide-fade-enter-active {
   transition: all .3s ease;
 }
.slide-fade-leave-active {
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
   transform: translateX(10px);
 opacity: 0;
 }
11
skribe