[ヴュー]：アニメーション

Vueのアニメ

Vueのアニメーションを含みます：

4つの時点
- V-入力してください：遷移状態の初めに定義します。
- V-に入力します：終了状態への遷移を定義します。
- V-まま：遷移状態の始まりの定義を残します。
- V-TO-残す：遷移状態の左端を定義します。
二つの期間
- V-入力し-アクティブ：定義をトランジションエフェクトの状態に。
- V-ままアクティブ：状態遷移効果の定義を残して。

典型的な例：

トランジションを使用して、HTMLは、包ま遷移元素が必要になります

<div id="app">
    <input type="button" value="切换" @click="flag = !flag">
    <transition>
        <h3 v-if="flag">这是一个H3</h3>
    </transition>
</div>

ジャバスクリプト

var vm = new Vue({
    el: '#app',
    data: {
        flag: false
    }
})

/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.v-enter,
.v-leave-to {
    opacity: 0;
}

/* 定义进入和离开时候的过渡状态 */
.v-enter-active,
.v-leave-active {
    transition: all 0.4s ease;
}

カスタムV-プレフィックス

デフォルトのtranscition要素を自動的v-スタイルを通じて、nameプロパティできるカスタムスタイルのプレフィックス

<transition name="my">
    <h3 v-if="flag2">这是一个H3</h3>
</transition>

.my-enter,
.my-leave-to {
    opacity: 0;
    transform: translateX(150px)
}

.my-enter-active,
.my-leave-active {
    transition: all 0.4s ease
}

サードパーティのライブラリを使用してCSSアニメーション

インポートアニメーションライブラリ：

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

トランジションと属性を定義します。

enter-active-class入場アニメーションの定義、leave-active-class休暇アニメーションの定義に加え、注目のCSSスタイルanimatedを有効にします

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h3 v-if="flag">这是一个H3</h3>
</transition>

animatedスタイルは内側要素に掛けてもよいです

<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>

:duration=“毫秒值”ロング統一指定された入口と出口アニメーション

<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="500">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>

:duration="{ enter: 200, leave: 400 }"ときに入ると長い残していたアニメーションを指定します

<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>

アニメーションのフック関数

フック関数は、プロパティ内で宣言することができます

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

アニメーション例のハーフ定義：

第1のパラメータアニメーションフック関数：EL、DOM要素のアニメーションの実装は、ネイティブJS DOMオブジェクトがを通してEL、と考えることができるされていることを前記document.getElementById('')ネイティブJS DOMオブジェクトように取得
beforeEnterは、この時点でのアニメーションの入場を表し前に、アニメーションは、まだあなたがbeforeEnter、アニメーションを開始style要素の開始前に設定することができ、開始されていません
映画の開始後表しにスタイルを入力します。
アニメーションが完了したら、それはafterEnterを呼び出します

JavaScriptのみの移行を使用している場合、それはコールバックを出入りして行われなければなりません。それとも、遅延のアニメーションが発生します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/animate.css">
  <style>
    .ball {
      height: 20px;
      width: 20px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="移动" @click="flag = !flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-if="flag"></div>
    </transition>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        beforeEnter(el) {
          // 设置小球开始动画之前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done) {
          // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
          // 可以认为 el.offsetWidth 会强制动画刷新，也可以写成offsetHeight，offsetLeft，offsetTop
          el.offsetWidth
          // 设置小球完成动画之后的，结束状态
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = "all 0.5s ease"
          // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
          done()
        },
        afterEnter(el) {
          this.flag = !this.flag
        }
      }
    })
  </script>
</body>

</html>

V-のための遷移リスト

トランジションのスタイルを定義するには：

遷移リストを実装する際に必要な遷移元素が、であれば、v-forアウトレンダリングリサイクル、あなたが使用することはできませんtransition小包を、あなたが使用する必要がありますtransition-group
あなたがしたい場合はv-forアニメーションの作成サイクルの要素、各要素は、設定する必要があります:keyプロパティを
するために、transition-group追加appearだけで入場効果の時に時間を表示するページを達成するためのプロパティを
以上のtransition-group要素、設定されtagた属性を、指定transition-groupを指定しない場合は、指定した要素をレンダリングtagレンダリング、デフォルトでは、プロパティをspanラベル。
<transition-group>コンポーネントの特別なもあります。アニメーションを入力して残すことができるだけでなく、あなたはまた、向きを変更することができます。新しい知っているこの新機能の必要性を使用するにはv-move機能を、それが要素の配置を変更するプロセスに適用されます。
v-moveそして、v-leave-active遷移の組み合わせは、リストはもっと穏やかで柔らかい作ることができます。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
  <style>
    li {
      border: 1px dashed #999;
      margin: 5px;
      list-style: none;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
    }

    li:hover {
      background-color: pink;
      transition: all 0.4s ease;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }
    
    /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
    .v-move {
      transition: all 0.6s ease;
    }
    /* 同时指定li width: 100% */
    .v-leave-active {
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <label>
        id:
        <input type="text" v-model="id">
      </label>
      <label>
        name:
        <input type="text" v-model="name">
      </label>
      <input type="button" value="添加" @click="add">
    </div>

    <transition-group appear tag="ul">
      <li v-for="(user, i) in list" :key="user.id" @click="del(i)">
        {{user.id}} -- {{user.name}}
      </li>
    </transition-group>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: "张三1" },
          { id: 2, name: "张三2" },
          { id: 3, name: "张三3" },
          { id: 4, name: "张三4" },
          { id: 5, name: "张三5" },
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    })
  </script>
</body>

</html>

Vueのアニメ

カスタムV-プレフィックス

サードパーティのライブラリを使用してCSSアニメーション

アニメーションのフック関数

V-のための遷移リスト

おすすめ