VueJS-トランジションとアニメーション

この章では、VueJSで利用できるトランジションとアニメーション機能について説明します。

遷移

VueJSは、HTML要素が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というボタンが作成されています。ありますp tagこれは、変数がtrueの場合にのみテキスト要素を表示します。次のコードに示すように、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として指定したため、クラスの名前は次のようになります。.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は一緒に定義され、開始段階と終了段階で遷移を適用します。不透明度プロパティは2秒で0に変更されます。

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

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

ボタンをクリックすると、テキストは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>

以下は出力です。

次のスクリーンショットに示すように、ボタンをクリックすると、画像が右に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は、遷移要素に属性として追加できるカスタムクラスのリストを提供します。

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

カスタムクラスは基本的に、animate.cssなどの外部CSSライブラリを使用する場合に役立ちます。

例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" 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>

出力

出力

出力

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

明示的な移行期間

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

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

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</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>

出力

上記の例では、遷移要素で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トランジションであることを理解するために行われます。

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

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

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

例

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" 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/[email protected]" 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>

出力

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved