uniappでコンポーネント切り替え時のアニメーションを設定する方法

モバイル インターネットの急速な発展に伴い、ユーザー エクスペリエンスを最優先にするアプリケーションがますます増えています。設計や開発において、インタラクティブな手法の一つとしてアニメーションの重要性はますます高まっています。

Uniapp は、最も人気のあるクロスプラットフォーム開発フレームワークの 1 つで、複数のプラットフォーム (WeChat ミニ プログラム、H5、アプリなど) の同時開発をサポートし、開発コストと時間を削減します。 Uniappではコンポーネント切り替えアニメーションを比較的簡単に実装できるので一緒に考えてみましょう。

1. トランジション コンポーネントを使用する

コンポーネントを切り替えるとき、Vue のトランジション コンポーネントを使用してアニメーションを実装できます。遷移コンポーネントは、次の 4 つの CSS クラス名を実装することで遷移アニメーション効果を実装します。

• .v-enter: 要素が挿入されたときに有効になります。
• .v-enter-active: 遷移の状態を定義します。要素が挿入されるときに有効になり、遷移プロセスが完了する前後に要素が削除されます。
• .v-enter-to: バージョン 2.1.8 以降で新たに追加されました。要素が挿入されたときに有効になり、遷移プロセスが完了した後に有効になります。
• .v-leave: 要素が削除されたときに有効になります。
• .v-leave-active: 遷移の状態を定義します。要素が削除されたとき、遷移プロセスが完了する前後に有効になります。
• .v-leave-to: バージョン 2.1.8 以降で新たに追加されました。要素が削除され、移行プロセスが完了した後に有効になります。

以下の例を使用して、トランジション コンポーネントの使用方法を示します:

<template>
  <div class="container">
    <transition name="fade">
      <div v-if="show">我是一段文字</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
}
</script>

この例では、Vue の v-if ディレクティブを使用して要素を表示および非表示にします。 show が true の場合、<div v-if="show">I am a Piece of text</div> がレンダリングされ、それ以外の場合は表示されません。この要素では、Vue のトランジション コンポーネントを使用し、name 属性を「fade」に設定し、トランジション効果の時間と属性を指定する 2 つのクラス名 fade-enter-active と fade-leave-active を定義しました。 fade-enter および fade-leave-to クラス名では、要素の不透明度属性を指定して、要素が表示および非表示になったときにフェードインおよびフェードアウト効果を持つようにします。

2. App.vue ファイルでグローバル トランジション エフェクトを定義する

アプリケーション全体で同じトランジション エフェクトを使用する必要がある場合は、アプリでグローバル トランジション エフェクトを定義できます。 vue ファイルのコンポーネント。以下は、ページ切り替えのトランジション効果を実装する例です:

<template>
  <div class="container">
    <transition name="page">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s;
}

.page-enter,
.page-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>

この例では、Vue のルーティング コンポーネント router-view を使用してページ切り替えを実装します。このコンポーネントの外側では、transition コンポーネントを使用し、name 属性を「page」に設定します。このトランジション コンポーネントでは、トランジション効果の時間と属性を指定するために使用される 2 つのクラス名、page-enter-active と page-leave-active も定義します。 page-enter および page-leave-to クラス名では、要素の不透明度および変換属性を指定して、ページに入るときと出るときにページの移動およびフェード効果を持たせます。

3. コンポーネントでアニメーション タグを使用する

Uniapp では、遷移コンポーネントに加えて、アニメーション タグを使用する、コンポーネントの切り替えをアニメーション化する簡単な方法も提供しています。アニメーション タグはアニメーションを完成させるために特別に設計されており、タグのプロパティを設定することで、アニメーション効果の開始、終了、継続時間、イージング機能を定義できます。

次は、Animation タグを使用してコンポーネント切り替えアニメーションを実装する例です:

<template>
  <div class="container">
    <animation :name="aniName" :duration="aniDuration">
      <div v-if="show" class="box"></div>
    </animation>
    <button @click="toggleShow()">toggleShow</button>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.move-enter-active {
  animation: move-enter 1s ease-out;
}

.move-leave-active {
  animation: move-leave 1s ease-in;
}

@keyframes move-enter {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes move-leave {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
</style>

<script>
export default {
  data() {
    return {
      show: true,
      aniName: "",
      aniDuration: 0
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.aniName = this.show ? "move-enter" : "move-leave";
      this.aniDuration = 1000;
    }
  }
}
</script>

この例では、2 つのキーワード <animation> と # # を使用します。 #

。このうち、アニメーションの名前と再生時間はAnimationタグで定義されており、ボタンをクリックするとその情報が変更されます。 box 要素では、Vue の v-if 命令を使用して要素を表示および非表示にします。 box 要素の外側で、move-enter-active と move-leave-active という 2 つのクラス名を定義して、使用するアニメーション効果を指定し、2 つのキー フレーム move-enter と move-leave を設定して、アニメーションの開始状態と終了状態を規定します。アニメーション効果。

まとめ

コンポーネント切り替えアニメーションを実装する方法は上記の 3 つですが、それぞれメリットとデメリットがあるため、プロジェクトのニーズに応じて適切な方法を選択できます。クロスプラットフォーム開発についてさらに詳しく知りたい場合は、Uniapp コースを受講して開発スキルと手法をさらに学びましょう。

以上がuniappでコンポーネント切り替え時のアニメーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。