Vue プロジェクトにおけるトランジション コンポーネントの適用の概要

<テンプレート>
  <div>
  <button v-on:click="表示 = !表示">
    トグル
  </ボタン>
  <トランジション名="フェード">
    <p v-if="show">こんにちは</p>
  </トランジション>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      表示: 真
    }
  },
}
</スクリプト>

<style スコープ lang="less">
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: すべて .5 秒;
}
 .フェードアウト{
  不透明度: 0;
  変換: translateX(20px);
}
.フェードエンター{
  不透明度: 0;
  変換: translateX(-20px);
}
</スタイル>

<テンプレート>
  <div>
    <トランジション名="フェード">
      <button class="position" @click="change" :key="status">
        コンポーネント</button>
    </トランジション>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      ステータス: '1'、
    }
  },
  メソッド: {
    変化 （） {
      if(this.docState === '1'){
        this.docState = '2'
      }それ以外{
        this.docState = '1'
      }
    }
  }
}
</スクリプト>

<style スコープ lang="less">
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: すべて .5 秒;
}
 .フェードアウト{
  不透明度: 0;
  変換: translateX(20px);
}
.フェードエンター{
  不透明度: 0;
  変換: translateX(-20px);
}
。位置{
  位置: 絶対;
}
</スタイル>

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="外部nofollow" rel="スタイルシート" type="text/css">

<div id="example-3">
  <ボタン @click="表示 = !表示">
    レンダリングを切り替える
  </ボタン>
  <遷移
    name="カスタムクラス遷移"
    enter-active-class="animated じゃんけん"
    leave-active-class="アニメーション bounceOutRight"
  >
    <p v-if="show">こんにちは</p>
  </トランジション>
</div>