Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

<テンプレート>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >テスト</button>
    <遷移>
      <div v-if="表示">
        <p>これはテキストです</p>
      </div>
    </トランジション>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'transitionTest',
  データ （） {
    戻る {
      表示: 真
    }
  }
}
</スクリプト>
<スタイルスコープ>
    .v-enter-active、.v-leave-active {
    遷移: すべて .5 秒;
    }
    .v-enter {
    変換: translateY(50px);
    不透明度: 0;
    }
    .v-アクティブ状態を解除{
    変換: translateY(50px);
    不透明度: .5;
    }
</スタイル>

    <トランジション名="my-trans" モード="out-in">
       <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>
    </トランジション>

<スタイル>
  .my-trans-enter-active、
  .my-trans-leave-active {
    遷移: すべて .2;
    不透明度: 1;
  }
  .my-trans-enter {
    遷移: すべて .2;
    不透明度: 0;
  }
  .my-trans-leave-to {
    遷移: すべて .2;
    不透明度: 0;
  }  
</スタイル>

<テンプレート>
  <div class="main_css">
    <トランジショングループ名="スライド">
      <li v-for="(item,i) リスト内" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </トランジショングループ>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'transitionGroupTest',
  データ （） {
    戻る {
      リスト: [{
        id: 1,
        名前: 「煮魚」
      },
      {
        id: 2,
        名前: 「フライドポテト」
      },
      {
        id: 3,
        名前: 「焼きナス」
      }
      ]
    }
  },
  メソッド: {
    デリ） {
      this.list.splice(i, 1)
    }
  }
}
</スクリプト>
<スタイルスコープ>
  .main_css {
    左マージン: 50px;
    上マージン: 50px;
  }
  .slide-enter-active {
    遷移: すべて 0.5 秒線形。
  }
  .slide-leave-active {
    遷移: すべて .1 秒線形。
  }
  .スライド-エンター{
    変換: translateX(-100%);
    不透明度: 0;
  }
  .slide-leave-to {
    変換: translateX(110%);
    不透明度: 0;
  }
</スタイル>