Vuejs-transition-and-animation

提供：Dev Guides
移動先:案内、検索

VueJS-移行とアニメーション

この章では、VueJSで利用可能な遷移およびアニメーション機能について説明します。

遷移

VueJSは、DOMで追加/更新されたHTML要素に遷移を適用するさまざまな方法を提供します。 VueJSには、移行が必要な要素をラップする必要がある組み込みの移行コンポーネントがあります。

構文

<transition name = "nameoftransition">
   <div></div>
</transition>

移行の仕組みを理解するための例を考えてみましょう。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to/*.fade-leave-active below version 2.1.8*/{
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

変数showの値をtrueからfalseに、またはその逆に変更できるclickmeというボタンが作成されます。 変数がtrueの場合にのみテキスト要素を表示する* pタグ*があります。 次のコードに示すように、pタグを遷移要素でラップしました。 

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

遷移の名前は fade です。 VueJSは、遷移用の標準クラスをいくつか提供し、クラスには遷移の名前がプレフィックスとして付けられます。

以下は、移行のためのいくつかの標準クラスです-

  • v-enter -このクラスは、要素が更新/追加される前に最初に呼び出されます。 その開始状態。
  • v-enter-active -このクラスは、移行フェーズに入るための遅延、持続時間、およびイージング曲線を定義するために使用されます。 これは全体のアクティブ状態であり、クラスは入力フェーズ全体で利用可能です。
  • v-leave -退場遷移がトリガーされたときに追加され、削除されました。
  • v-leave-active -離脱フェーズ中に適用されます。 移行が完了すると削除されます。 このクラスは、離脱フェーズ中に遅延、持続時間、およびイージング曲線を適用するために使用されます。

上記の各クラスには、遷移の名前がプレフィックスとして付けられます。 遷移の名前をフェードとして指定しているため、クラスの名前は .fade_enter、.fade_enter_active、.fade_leave、.fade_leave_active になります。

それらは次のコードで定義されています。 

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to/*.fade-leave-active below version 2.1.8*/{
      opacity: 0
   }
</style>

fade_enter_activeと.fade_leave_activeは一緒に定義され、開始段階と終了段階で遷移を適用します。 opacityプロパティは2秒で0に変更されます。.

期間は.fade_enter_activeおよび.fade_leave_activeで定義されます。 最終段階は、.fade_enter、.fade_leave_toで定義されます。

ブラウザでの表示は次のとおりです。

Vue Transition

ボタンをクリックすると、テキストは2秒で消えます。

フェード

2秒後、テキストは完全に消えます。

別の例を考えてみましょう。画像があり、ボタンをクリックするとx軸上に移動します。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to/*.fade-leave-active below version 2.1.8*/{
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;"/>
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

遷移の名前は shiftx です。 次のコードを使用して、変換プロパティを使用してx軸上の画像を100pxシフトします。 

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to/*.fade-leave-active below version 2.1.8*/{
      transform :  translateX(100px);
   }
</style>

出力は以下のとおりです。

Shiftx

次のスクリーンショットに示すように、ボタンをクリックすると、画像は右に100pxシフトします。

画像右

アニメーション

アニメーションは、遷移が行われるのと同じ方法で適用されます。 アニメーションには、エフェクトを実行するために宣言する必要があるクラスもあります。

アニメーションがどのように機能するかを確認するための例を考えてみましょう。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;"/>
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

アニメーションを適用するには、遷移と同じクラスがあります。 上記のコードでは、次のコードに示すように、pタグで囲まれた画像があります。 

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;"/></p>
</transition>

遷移の名前は shiftx です。 適用されるクラスは次のとおりです- 

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

クラスには、遷移名の接頭辞が付けられます。 shiftx-enter-activeおよび.shiftx-leave-active。 アニメーションは、0％〜100％のキーフレームで定義されます。 次のコードに示すように、各キーフレームで定義された変換があります。 

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

出力は以下のとおりです。

アニメーション

ボタンをクリックすると、0から360度まで回転して消えます。

度の変更

カスタム遷移クラス

VueJSはカスタムクラスのリストを提供し、これを属性としてtransition要素に追加できます。

  • エンタークラス
  • エンターアクティブクラス
  • 休暇クラス
  • 離脱アクティブクラス

基本的に、カスタムクラスは、animate.cssなどの外部CSSライブラリを使用するときに機能します。

例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

出力

image

出力

アニメーションスイング

出力

Animated BounceIn

上記のコードには2つのアニメーションが適用されています。 1つのenter-active-class =「アニメーション化されたスイング」ともう1つのleave-active-class =「アニメーション化されたbounceIn」。 サードパーティのライブラリから適用されるアニメーションには、カスタムアニメーションクラスを使用しています。

明示的な遷移期間

VueJSを使用して、要素に遷移とアニメーションを適用できます。 Vueは、transionendおよびanimationendイベントがアニメーションまたは遷移が完了したかどうかを検出するのを待ちます。

移行によって遅延が発生する場合があります。 このような場合、次のように期間を明示的に適用できます。 

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

上記のように、transition要素でdurationプロパティを：とともに使用できます。 入場と退場の期間を個別に指定する必要がある場合は、上記のコードのように行うことができます。

JavaScriptフック

遷移クラスは、JavaScriptイベントを使用してメソッドとして呼び出すことができます。 理解を深めるために例を考えてみましょう。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

出力

JavaScriptフック

JsHooks

上記の例では、transition要素でjsメソッドを使用してアニメーションを実行しています。

移行の方法は次のように適用されます- 

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
*v-on* が追加されたプレフィックスと、メソッドが呼び出されるイベントの名前があります。 メソッドは次のようにVueインスタンスで定義されています-
methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

必要な遷移は、これらの各方法に適用されます。 ボタンのクリック時およびアニメーションの完了時に適用される不透明度アニメーションがあります。 サードパーティのライブラリはアニメーションに使用されます。

遷移v-bind：css = "false"に追加されたプロパティがあります。これは、VueがJavaScript遷移であることを理解するために行われます。

初期レンダリングでの移行

アニメーションを最初に追加するには、遷移要素に「appear」プロパティを追加する必要があります。

よりよく理解するために例を見てみましょう。

例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

上記の例では、animate.cssライブラリの3つの異なるアニメーションを使用しています。 トランジション要素にappearを追加しました。

上記のコードを実行すると、ブラウザに次の出力が表示されます。

異なるアニメーション

コンポーネントのアニメーション

次のコードを使用して、コンポーネントの遷移をラップできます。 ここでは動的コンポーネントを使用しました。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

出力

コンポーネントのアニメーション

「https://www.finddevguides.com/index.php?title=Vuejs-transition-and-animation&oldid=13970」から取得
Powered by MediaWiki