Vueの指定された移行の力

Vue.jsは、フェードイン、スライドイン、またはその他の視覚効果など、DOMに挿入されたときに要素またはコンポーネントが視覚的にレンダリングされる方法を制御するさまざまな方法を提供します。これらの機能のほとんどすべては、単一のコンポーネントに基づいています：遷移コンポーネント。

簡単な例は、ブール値に基づいたv-ifです。ブールが真の場合、要素が表示されます。それがfalseの場合、要素は消えます。通常、この要素は現れて突然消えますが、遷移コンポーネントを使用すると、視覚効果を制御できます。

<transition><div v-if="isVisible">目に見えますか？</div></transition>

多くの記事は、サラ・ドラスナー、ニコラス・ウディ、ハッサン・ダージェルのようなトランジションコンポーネントの良い紹介を提供しています。各記事は、VUE遷移コンポーネントのさまざまな側面を詳述しています。この記事では、遷移コンポーネントの1つの側面に焦点を当てます。それらは「名前が付けられている」ことができます。

<transition name="fade"><div v-if="isVisible">目に見えますか？</div></transition>

このプロパティによってもたらされた最初の変更は、遷移シーケンス中に要素に注入されたCSSクラスに、指定された名前が付けられていることです。基本的に、それは上記のv-enterの代わりにfade-enterになります。この単一のプロパティには、この単純なオプションよりもはるかに多くのものがあります。 VUEとCSSの特定の機能を利用して、興味深い結果を生み出すために使用できます。

考慮すべきもう1つのことは、名前属性をバインドできることです。

<transition :name="currentTransition"><div v-if="isVisible">目に見えますか？</div></transition>

この例では、遷移は、 currentTransitionによって解析された値として命名されます。この単純な変更は、アプリケーションのアニメーションのオプションと機能の別の層を提供します。静的および動的な命名遷移を使用して、プロジェクトはアプリケーション全体に適用できる一連の事前に構築されたトランジションを持つことができ、既存の遷移に適用されるコンポーネントを拡張し、アプリケーションの前後に使用されるトランジションを切り替え、ユーザーがリストの現在の状態に基づいてリストトランジションの個々の要素をどのように制御できるかを制御できます。

この記事は、これらの機能を探求し、それらの使用方法を説明することを目的としています。

遷移を命名するとどうなりますか？

デフォルトでは、遷移コンポーネントを使用する場合、特定のクラスを特定の順序で要素に適用します。これらのクラスはCSSで使用できます。 CSSがなければ、これらのクラスは実際には要素に影響を与えません。したがって、この性質のCSSが必要です。

 .v-enter、
.v-leave-to {
  不透明：0;
}

.v-enter-active、
.v-leave-active {
  遷移：0.5秒;
}

これにより、要素は0.5秒間にわたってフェードインとフェードアウトします。遷移のわずかな変更により、ユーザーはエレガントな視覚的フィードバックを提供します。ただし、考慮すべき問題がまだあります。しかし、最初に、naming遷移の違いは何ですか？

 .fade-enter、
.fade-leave-to {
  不透明：0;
}

.fade-enter-active、
.fade-leave-active {
  遷移：0.5秒;
}

基本的に同じCSSですが、 v-の代わりにfade-プレフィックスとして使用します。この命名は、遷移コンポーネントのデフォルトのクラス名を使用するときに発生する可能性のある問題を解決します。 v-プレフィックスは、特にアプリケーションルートレベルのスタイルブロックにCSSを配置する場合、実際にクラスをグローバルにします。これにより、実際には、アプリケーション全体の名前属性のない *すべて *遷移が同じ遷移効果を使用します。小規模なアプリケーションでは、これで十分かもしれませんが、より大きく複雑なアプリケーションでは、すべてが0.5秒で消えるわけではないため、悪いビジュアルにつながる可能性があります。

ネーミングトランジションは、さまざまな要素またはコンポーネントを視覚的に挿入または削除する方法について、プロジェクトを通じて開発者に制御レベルを提供します。そうする習慣を開発するために、すべての移行に名前が付けられることをお勧めします。アプリケーションに1つの遷移効果しかない場合でも、将来新しい遷移効果を追加する必要がある場合があります。既存の移行はプロジェクトで命名されており、新しい移行を追加する努力を簡素化します。

一連の遷移効果を構築します

命名遷移は、シンプルだが非常に有用なプロセスを提供します。一般的な慣行は、それらを使用するコンポーネントの一部としてトランジションクラスを作成することです。スコープされたコンポーネントスタイルの別の一般的なプラクティスが完了した場合、これらのクラスはその特定のコンポーネントでのみ利用可能になります。 2つの異なるコンポーネントがスタイルブロックに同様の遷移がある場合、コードを繰り返しているだけです。

したがって、遷移CSSをアプリケーションルートディレクトリのスタイルブロック（通常はapp.vueファイル）に保持することを考えてみましょう。私のプロジェクトのほとんどで、調整と追加を簡単に検索するために、スタイルブロックの最後の部分にそれらを配置しました。この場所でCSSを保存して、アプリケーション全体の遷移コンポーネントの使用ごとに遷移効果を使用できるようにします。ここに私のプロジェクトのいくつかの例があります。

 .fade-enter、
.fade-leave-to {opacity：0; }
.fade-enter-active、
.fade-leave-active {transition：0.5s; }

.slide-enter {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（400px、0、0）;
}

.slide-enter-to {transform：scale3d（1、1、1）; }
.slide-enter-active、
.slide-leave-active {transition：0.5s cubic-bezier（0.68、-0.55、0.265、1.55）; }
.slide-leave {transform：scale3d（1、1、1）; }

.slide-leave-to {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（-400px、0、0）;
}

.rotate-enter {transform：perspective（500px）rotate3d（0、1、0、90deg）; }
.Rotate-Enter-Active、
.rotate-leave-active {transition：0.5s; }
.rotate-leave-to {transform：perspective（500px）rotate3d（0、1、0、-90deg）; }

好みとプロジェクトのニーズに応じて、これらのトランジションクラスを保存する方法はいくつかあります。最初のものは、前述のように、すべてをapp.vueファイルのスタイルブロックに保存することです。また、プロジェクトのすべての移行されたSASSパーツをプロジェクトのAssetsフォルダーに保存し、アプリケーションのスタイルブロックにインポートすることもできます。

 @import "assets/_transitions.scss";

この方法では、Vueファイルの外側にトランジションコレクションを調整および追加できます。このセットアップのもう1つの利点は、プロジェクトが移行効果を共有する場合、プロジェクト間でそのようなファイルを簡単に転送できることです。プロジェクトが新しいトランジションを取得した場合、メインプロジェクトファイルに触れることなく、追加されたコンテンツを別のプロジェクトに簡単に転送できます。

SASSの代わりにCSSを使用している場合は、プロジェクトの依存関係としてファイルを含めることができます。これを行うには、プロジェクトのAssetsフォルダーにファイルを保存し、 main.jsファイルにrequireステートメントを配置することで行うことができます。

 require（ "@/assets/transitions.css"）;

別のオプションは、プロジェクトのパブリックフォルダーまたはサーバー上に直接保存できる静的CSSファイルにトランジションスタイルを保存することです。これは通常のCSSファイルであるため、ビルドまたは展開する必要はありません - index.htmlファイルにリンクリファレンスを含めるだけです。

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

このファイルは、すべてのプロジェクトを共有するためにCDNに保存される可能性もあります。ファイルが更新されるたびに、変更は参照されるすべての場所ですぐに利用可能になります。新しいトランジション名が作成されている場合、既存のプロジェクトは必要に応じて新しい名前の使用を開始できます。

さて、ちょっと遅くしましょう

プロジェクト全体で使用するトランジションコレクションを構築するときは、アニメーションが突然あまりにも不可能になりたくないか、アニメーションがまったく表示されたくないユーザーを考えてみましょう。私たちのアニメーションはあまりにも誇張されていて不必要だと考える人もいるかもしれませんが、一部の人にとっては、実際に問題を引き起こす可能性があります。しばらく前に、WebKitは、可能性のある前庭スペクトルの障壁を解決するために、 prefers-reduced-motion 。エリック・ベイリーは、メディアクエリの良い紹介も投稿しました。

ほとんどの場合、トランジションセットの一部としてメディアクエリを使用することは非常に簡単であり、考慮する必要があります。マイナスの影響を軽減するために、移行に関与する運動量を減らすか、単にそれらをオフにすることができます。

ここに私のデモの1つの簡単な例があります：

 .next-enter {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（400px、0、0）;
}

.next-enter-to {transform：scale3d（1、1、1）; }
.next-enter-active、
.next-leave-active {transition：0.5s cubic-bezier（0.68、-0.55、0.265、1.55）; }
.next-leave {transform：scale3d（1、1、1）; }

.next-leave-to {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（-400px、0、0）;
}

/*オペレーティングシステムレベルでアニメーションが削減された場合、よりシンプルな遷移を使用*/
@media画面と（還元モーションを好む：redument）{
  .next-enter {
    不透明：0;
    変換：translate3d（100px、0、0）;
  }

  .next-enter-active、
  .next-leave-active {transition：0.5s; }

  .next-leave-to {
    不透明：0;
    変換：translate3d（-100px、0、0）;
  }
}

この例では、かなり誇張された移行を行い、より簡単にしました。アニメーションは、弾力性のある緩和効果で左に移動するスライドアニメーションであり、削除すると縮小してフェードアウトします。誰かのモーション選好が設定されている場合、アニメーションはより短い距離（それが遅くなります）でよりシンプルな遷移になり、フェードアウトし続けます。それらをオフにしたい場合は、 transition属性を持つクラスを参照して、それらの値をnoneにも設定する必要があります。

これをテストするには、それぞれのオペレーティングシステムのチェックボックスを見つけて選択する必要があります。 Windowsでは、<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>。 「すべての不要なアニメーション（可能であれば）を閉じる」を探してください。 Macで、<kbd>系统偏好设置> 辅助功能> 显示</kbd>; 「スポーツを減らす」を見つけます。最新のiOSデバイスには<kbd>辅助功能</kbd>の下で同様の設定があります。

移行セットを柔軟に保ちましょう

この遷移セットを使用すると、柔軟性に問題がある可能性があります。たとえば、要素が少し遅いフェージング時間を必要とする場合はどうなりますか？効果の他のすべてが変更されておくことができると仮定すると、 transition-duration変更するだけです。まったく新しい遷移名を作成せずに調整する方法があります。

最も簡単な方法は、遷移コンポーネント内の要素でインラインスタイルを直接使用することです。

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible">これには異なる期間があります</div></transition>

このような変更は、Vueが提供するスタイルとクラスの処理方法を通じて行うことができます。

たとえば、動的コンポーネントを実行するためにis属性を持つコンポーネント要素を使用しているとします。

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

この動的コンポーネントを使用しても、遷移効果のプロパティを調整するオプションがあります。同様に、コンポーネント要素にインラインスタイルを適用できます。コンポーネントのルート要素に配置されます。ルート要素は遷移クラスも受信するため、そのプロパティを直接オーバーライドします。

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

別のオプションは、プロップをコンポーネントに渡すことです。これにより、必要な変更は、コンポーネントのコードを介してルート要素に適用できます。

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`">コンポーネント1</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

また、特に範囲内で、コンポーネントスタイルブロック内の移行クラスのプロパティをオーバーライドすることもできます。

 .fade-enter-active、
.fade-leave-active {transition-duration：1s; }

この場合、コンポーネントのフェードアウト期間は、半秒の世界的な期間ではなく、1秒になります。さらに一歩進んで、シーケンスの各側に異なる期間を設定することもできます。

 .fade-enter-active {transition-duration：1s; }
.fade-leave-active {transition-duration：2s; }

必要に応じて、グローバルトランジションクラスをコンポーネント内で変更できます。これは、クラス構造以外のプロパティの変化ほど柔軟ではありませんが、場合によっては非常に便利です。

ご覧のとおり、事前に構築されたトランジションコレクションがあっても、柔軟性のあるオプションがあります。

動的遷移

Vueのトランジションコンポーネントでこの興味深いことをすべて行うことができた後でも、別の興味深い機能がまだ検討されるのを待っています。遷移コンポーネントの名前のプロパティは動的である可能性があります。つまり、現在使用されている遷移を自由に変更できます。

これは、コードのさまざまな状況に従って遷移を変更して、異なるアニメーション効果を持つことを意味します。たとえば、質問への回答に基づいて遷移を変更し、ユーザーの相互作用に基づいて遷移を決定し、リスト自体の現在の状態に基づいてリストに異なる遷移を使用させることができます。

これらの3つの例を見てみましょう。

例1：回答に従って遷移を変更します

この例では、答える簡単な数学の問題があります。 2つの数値をランダムに選択すると、それらの合計を提供する必要があります。次に、ボタンをクリックして、回答を予想される答えと比較します。回答が真かfalsであるかどうかを示す方程式の上に小さな通知が表示されます。答えが正しい場合、通知は、上下アニメーションの肯定的な移行を示すためにうなずく提案を提供します。答えが正しくない場合、通知は左右に移動し、頭と否定の揺れを示します。

その背後にあるロジックは複雑ではなく、遷移の設定は複雑ではありません。これはHTMLです：

<transition :name="currentTransition"><div v-if="answerChecked"> {{ 応答 }}</div></transition>

性質は非常に簡単です。遷移にバインドされた名前があり、次に通知divにv-ifあります。また、回答に基づいて通知を飾るために、真または偽のクラスを適用しました。

これが移行CSSです：

 .positive-enter-active {アニメーション：ポジティブ1S; }
@KeyFrames Positive {
  0％{変換：translate3d（0、0、0）; }
  25％{変換：translate3d（0、-20px、0）; }
  50％{変換：translate3d（0、20px、0）; }
  75％{変換：translate3d（0、-20px、0）; }
  100％{変換：translate3d（0、0、0）; }
}

.Negative-Enter-Active {animation：negative 1s; }
@KeyFramesネガティブ{
  0％{変換：translate3d（0、0、0）; }
  25％{変換：translate3d（-20px、0、0）; }
  50％{変換：translate3d（20px、0、0）; }
  75％{変換：translate3d（-20px、0、0）; }
  100％{変換：translate3d（0、0、0）; }
}

CSSアニメーションを使用して上下と左右の効果を実現することがわかります。

JavaScriptコードは次のとおりです。

方法：{
  randomproblem：function（）{
    this.a = math.floor（math.random（） * math.floor（10））;
    this.b = math.floor（math.random（） * math.floor（10））;
  }、
  チェック：function（）{
    this.response = this.a this.b === parseint（this.answer）;
    this.answerchecked = true;
    this.currenttransition = this.response？ 「ポジティブ」：「ネガティブ」;
  }、
  リセット：function（）{
    this.answer = null;
    this.answerchecked = false;
    this.randomproblem（）;
  }
}

これが方程式を設定するrandomProblemメソッドです。 check方法は、提供された回答を正解と比較することに基づいて、使用する遷移効果を決定します。次に、すべてをリセットするだけの単純なresetメソッドがあります。

これは単なる簡単な例です。別の可能な例は、通知が重要かどうかに応じて、2つの異なる効果を持つ通知です。メッセージがあまり重要でない場合は、ユーザーの目が現在のタスクを離れない微妙なアニメーションを使用できます。それが重要な場合は、より直接的なアニメーションを使用して、目を強制して通知を検索することができます。

例2：ユーザーインタラクションに基づいて遷移を変更します

私たちが構築できるもう1つのことは、ある種のカルーセルです。これは、スライドプレゼンテーション、写真ギャラリー、または一連の指示です。基本的なアイデアは、ユーザーに順番に情報を提示する必要があるということです。このデモンストレーションでは、ユーザーはいつ続行するか、前進するか、または後方に進むかを決定できます。

これはかなり簡単なセットアップでもあります。この例は、多かれ少なかれスライドプレゼンテーションタイプのケースです。下部の2つのボタンは、スライド遷移を備えた2つのコンポーネントを切り替えます。実際のプロジェクトには、現在のスライドに応じて、コンポーネントが増えるか、コンポーネントコンテンツのロジックが変更される場合があります。この例は、アイデアを示すために簡単に保たれます。

これはHTMLです：

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

コンポーネントがバインディングを介して切り替えられるたびに、コンポーネント要素の属性が属性でisことがわかります。遷移するだけです。

これはCSSです：

 .next-enter {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（400px、0、0）;
}

.next-enter-to {transform：scale3d（1、1、1）; }
.next-enter-active、
.next-leave-active {transition：0.5s cubic-bezier（0.68、-0.55、0.265、1.55）; }
.next-leave {transform：scale3d（1、1、1）; }

.next-leave-to {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（-400px、0、0）;
}

.prev-enter {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（-400px、0、0）;
}

.prev-enter-to {transform：scale3d（1、1、1）; }
.prev-enter-active、
.prev-leave-active {transition：0.5s cubic-bezier（0.68、-0.55、0.265、1.55）; }
.prev-leave {transform：scale3d（1、1、1）; }

.prev-leave-to {
  不透明：0;
  変換：scale3d（2、0.5、1）translate3d（400px、0、0）;
}

/*オペレーティングシステムレベルでアニメーションが削減された場合、よりシンプルな遷移を使用*/
@media画面と（還元モーションを好む：redument）{
  .next-enter {不透明：0;変換：translate3d（100px、0、0）; }
  .next-enter-active、
  .next-leave-active {transition：0.5s; }
  .next-leave-to {opacity：0;変換：translate3d（-100px、0、0）; }

  .prev-enter {不透明：0;変換：translate3d（-100px、0、0）; }
  .prev-enter-active、
  .prev-leave-active {transition：0.5s; }
  .prev-leave-to {opacity：0;変換：translate3d（100px、0、0）; }
}

ここには、ユーザーが「次の」ボタンをクリックし、もう1つは「prev」ボタン用に「次の」ボタンのボタン用に2つの遷移があります。それぞれが基本的にtransformプロパティを使用してコンポーネントを適切な方向にスライドさせますが、漫画効果のために絞り効果を作成するための追加があります。また、 prefers-reduced-motionを使用して、アニメーションをよりシンプルなフェード効果に変更し、適切な方向に少しスワイプします。

さて、JavaScriptの場合：

方法：{
  changeslide：function（dir）{
    this.currentslide = dir === 'next'？ this.currentslide 1：this.currentslide -1;
    this.currenttransition = dir;
  }
}

各ボタンは、クリックイベントのchangeSlideメソッドを呼び出し、それが表す方向を渡します。次に、現在のスライドが何であるかを追跡するロジックがあります。シングルラインコードは、使用する遷移を制御します。 「次の」ボタンは「次の」を方向として渡すため、CSSの「次の」遷移に対応します。 「Prev」ボタンにも同じことが言えます。ユーザーがボタンをクリックするたびに、アプリケーションは使用するトランジションを自動的に認識します。したがって、ユーザーがシーケンスに向かっている方向に関するコンテキストを提供できる優れた遷移効果があります。

例3：リストステータスに基づいて遷移を変更します

最後の例では、 transition-groupコンポーネント内のリストの現在の状態に基づいて遷移を変更する方法を学びます。ここでのアイデアはリストであり、アイテムが更新されるたびに、毎回異なるトランジションを使用しています。

この例では、右側の都市リストと左側の空白リストを示します。右側の都市を選択すると、左側の空白を埋めます。最初の都市は、ビューにフェードインしながら上からスライドします。最後の都市の前の次の都市は、前の移行に応じて右または左から滑り込みます。最後の都市は下から滑り込みます。

これはHTMLです：

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems"> {{ アイテム }}</li></transition-group>

いつものように、かなり単純なセットアップ。 CSSの移行は次のとおりです。

 .top-enter-active、
.top-leave-active {transition：0.5s; }
.top-enter、
.top-leave-to {
  不透明：0;
  変換：translate3d（0、-40px、0）;
}

.top-move {
  不透明度：0.5;
  遷移：0.5秒;
}

.Left-enter-active、
.Left-Leave-active {transition：0.5s; }
.Left-enter、
.Left-Leave-to {
  不透明：0;
  変換：translate3d（-40px、0、0）;
}

.Left-Move {
  不透明度：0.5;
  遷移：0.5秒;
}

.Right-Enter-Active、
.Right-Leave-active {transition：0.5s; }
.Right-Enter、
.Right-Leave-to {
  不透明：0;
  変換：translate3d（40px、0、0）;
}

.Right-Move {
  不透明度：0.5;
  遷移：0.5秒;
}

.bottom-enter-active、
.bottom-leave-active {transition：0.5s; }
.bottom-enter、
.bottom-leave-to {
  不透明：0;
  変換：translate3d（0、30px、0）;
}

.bottom-move {
  不透明度：0.5;
  遷移：0.5秒;
}

/*オペレーティングシステムレベルでアニメーションが削減された場合、遷移を閉じます*/
@media画面と（還元モーションを好む：redument）{
  .top-enter-active、
  .top-leave-active {transition：none; }
  .top-move {transition：none; }
  .Left-enter-active、
  .Left-Leave-active {transition：none; }
  .left-move {transition：none; }
  .Right-Enter-Active、
  .Right-Leave-active {transition：none; }
  .right-move {transition：none; }
  .bottom-enter-active、
  .bottom-leave-active {transition：none; }
  .bottom-move {transition：none; }
}

ご覧のとおり、可能な各都市の方向は、遷移のあるブランクリストに表示されます。

さて、私たちのJavaScriptのために：

方法：{
  choosecity：function（index）{
    let selectedLength = this.selectedItems.length;
    let citieslength = this.cities.length;
    let clt = this.currentListTransition;

    if（selectedlength === 0）{
      clt = 'top';
    } else if（selectedlength> 0 && selectedLength <citieslength clt="clt" this.currentlisttransition="clt;" this.selecteditems.push this.cities.splice><p> <code>chooseCity</code>メソッドは、各都市を選択するときに何が起こるかを処理します。私たちが主に懸念しているのは、メソッドの中央にある<code>if</code> <code>if/else</code>ステートメントのシリーズです。都市が選択されると、ロジックは、選択した都市を押し出すことになっている<code>selectedItems</code>アレイの現在の長さを調べます。長さがゼロの場合、それが最初の都市であるため、移行により上から入るようになります。長さがゼロと都市リストの総数の間である場合、遷移は右または左でなければなりません。使用される新しい方向は、前の遷移方向の方向に基づいています。その後、最後に、最後の都市を選択すると、底部の移行に変わります。繰り返しますが、この場合の遷移を完全に閉じる、 <code>prefers-reduced-motion</code>を使用します。</p>
<p>リスト遷移を変更する別のオプションは、選択したアイテムのタイプに基づいて変更を加えることです。たとえば、東海岸と西海岸の都市では、各都市には異なる移行があります。リストに追加されたアイテムの現在の数に基づいて移行を変更することを検討してください。たとえば、5つのアイテムごとに異なる遷移。</p>
<h3 id="さようなら-すべての移行に感謝します">さようなら、すべての移行に感謝します</h3>
<p>これらすべての例とアイデアの後、私はあなたがあなた自身のプロジェクトでVueのトランジションコンポーネントを利用することを検討することを願っています。アプリにトランジションとアニメーションを追加する可能性を調べて、ユーザーにコンテキストと関心を提供します。多くの場合、このような追加は非常に簡単に実装できますが、それらを追加しないのは残念です。 Vueは、エキサイティングで非常に便利なボックス外の機能であるトランジションコンポーネントを提供します。</p>
<p>乾杯。</p></citieslength>

以上がVueの指定された移行の力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。