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

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

PHPz

リリース： 2023-04-18 14:35:07

オリジナル

2350 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。