Vue+animate でプロジェクト内にトランジションアニメーションを作成します

今回は、プロジェクトでトランジションアニメーションを作成するための Vue+animate について、実際のケースを見てみましょう。

はじめに:

1. transitionメソッドの使い方

2. transition組み込みメソッド

3. transition-group

トランジションアニメーションを実装するanimateライブラリ

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <script></script>
  <link>
  <style>
    [v-cloak] {
      display: none;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin: 10px auto;
    }
    /* .fade-enter-active, .fade-leave-active {
      transition: 1s all ease;
    }
    .fade-enter-active {
      opacity: 1;
      width: 300px;
      height: 300px;
    }
    .fade-leave-active {
      opacity: 0;
      width: 100px;
      height: 100px;
    }
    .fade-enter, .fade-leave {
      width: 100px;
      height: 100px;
      opacity: 0;
    } */
  </style>
  <script>
    window.onload = function() {
      new Vue({
        el: &#39;#box&#39;,
        data: {
          show: &#39;&#39;,
          list: [&#39;apple&#39;, &#39;banana&#39;, &#39;orange&#39;, &#39;pear&#39;]
        },
        computed: {
          lists: function() {
            var arr = [];
            this.list.forEach(function(val) {
              if (val.indexOf(this.show) != -1) {
                arr.push(val);
              }
            }.bind(this))
            return arr;
          }
        }
      })
    }
  </script>


  <p>
    <input>
    <!-- class定义 .fade
      .fade-enter{}      初始状态
      .fade-enter-active{}   进入过程
      .fade-leave{}      离开状态
      .fade-leave-active{}   离开过程
    -->
    <transition-group>
      <!-- 内置方法
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter"
        @before-leave = "beforeLeave"
        @leave = "leave"
        @after-leave = "afterLeave"
      -->
      <!-- transition-group 多个元素运动，注意绑定key:1 -->
      <p>
        {{val}}
      </p>  
    </transition-group>
  </p>

を読んでメソッドをマスターしたと思いますこの記事の事例など、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

実際のプロジェクトでインストール プラグインを使用する方法

プロジェクトで JS イベント委任を使用する方法

以上がVue+animate でプロジェクト内にトランジションアニメーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。