Vueアニメーション（トランジション）

プログラミング 2023-07-26 02:24:18 訪問数: null

1. 実施原則

要素を挿入、更新、削除するときはDOM、適切なタイミングで要素にスタイル クラス名を追加し、CSSそれをスタイルとともに使用してアニメーション効果を実現します。

平たく言えば、アニメーションさせたい要素をタグDOMで囲むことです。transitionこの HTML 要素の移動前、移動中、移動後に、さまざまな要素が追加vueされ、スタイルと組み合わせてアニメーション効果を実現します。DOMclassCSS

例：

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style>
/* 进入：始状态 */
.v-enter {
      
      
  transform: translateX(-100%);
  color: red;
}
/* 进入：末状态 */
.v-enter-to {
      
      
  transform: translateX(0);
  color: yellow;
}
/* 进入动画 */
.v-enter-active {
      
      
  transition: 10s;
  color: linear-gradient(red,yellow);;
}

/* 离开：始状态 */
.v-leave {
      
      
  transform: translateX(0);
}
/* 离开：末状态 */
.v-leave-to {
      
      
  transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
      
      
  transition: 1s;
}
</style>

2、遷移ラベル

  • Vue組み込みのアニメーション タグ:transition
  • transitionタグには 1 つの要素のみを含めることができます。複数の要素を内部に記述した場合、最初の要素のみが有効になります。
  • transitionラップされたタグには、要素の表示を制御するための設定v-show/プロパティが必要ですv-if

3.アニメーションCSSスタイルに対応するクラス名

  • Enter:.v-enter開始状態、.v-enter-to終了状態、.v-enter-activeアニメーションに入る
  • Leave:.v-leave開始状態、.v-leave-to終了状態、.v-leave-activeLeave アニメーション
  • .v-enter,.v-leaveアニメーションの初期状態を定義します。初期位置、色、フォントなどを定義できます。
  • .v-enter-to、アニメーションの最終状態を定義します。これら 2 つのクラスの定義は DOM クラスと一致している必要があります。そうでない場合、.v-leave-toアニメーションの終了後に.v-enter-to、のスタイルから.v-leave-toDOM のスタイルに即座に変更されます (例 1、例 2)。
  • .v-enter-active,.v-leave-activeアニメーションのグラデーション ルールを定義します。たとえば、位置グラデーションの場合は、グラデーションの時間とパスを定義します。カラー グラデーションの場合は、色関連のグラデーション ルールを定義します。

3.1 例 1

赤から黄色に消えていきます

<template>
    <div>
      <button @click="bol = !bol">隐藏/显示</button>
      <transition>
        <h1 v-show="bol" class="demo">组件动画效果</h1>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
      
      
    name: "TestDemo",
    data() {
      
      
      return {
      
       bol: true };
    },
  };
  </script>
  
  <style>
  .v-enter-active,
  .v-leave-active {
      
      
    transition: 10s !important;
    color: linear-gradient(red,yellow) !important;
  }

  .demo {
      
      
    color: yellow;
  }

  .v-enter,
  .v-leave-to {
      
      
    transform: translateX(-50%);
    color: red;
  }
  </style>

3.2 例 2

赤から黄色に消え、すぐに黒に変わります

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition>
      <h1 v-show="bol" class="demo">组件动画效果</h1>
    </transition>
  </div>
</template>
  
  <script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>
<style>
.v-enter,
.v-leave-to {
      
      
  transform: translateX(-50%);
  color: red;
}

.v-enter-to,
.v-leave {
      
      
  transform: translateX(0);
  color: yellow;
}

.v-enter-active,
.v-leave-active {
      
      
  transition: 10s !important;
  color: linear-gradient(red, yellow) !important;
}
</style>

4. トランジションタグのプロパティ

4.1 名前属性

CSSアニメーションクラス名を自動生成するために使用されます。

  • transitionlabel 要素でname属性が設定されていない場合、対応するアニメーション クラス名は次のようになります。v-XXX
  • 属性が設定されている場合name、対応するアニメーション クラス名は次のとおりです。属性值-XXX
  • 複数のタグがある場合、属性を通じてタグごとに異なるアニメーション効果を指定tansitionできます。nametransitionCSS

4.2 出現属性

開始時に有効なアニメーションを表示

4.3 モード属性

  • in-out: 新しい要素が最初に遷移し、現在の要素は完了後に遷移します。
  • out-in: 現在の要素が最初に遷移し、完了後に新しい要素が遷移します。

4.4 例

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition name="test" appear>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style>
.test-enter,
.test-leave-to {
      
      
  transform: translateX(-50%);
  color: red;
}

.test-enter-to,
.test-leave {
      
      
  transform: translateX(0);
  color: yellow;
}

.test-enter-active,
.test-leave-active {
      
      
  transition: 10s !important;
  color: linear-gradient(red,yellow) !important;
}
</style>

5、遷移グループラベル

  • transitionラベルには 1 つの要素のみを含めることができ、transition-groupラベルには複数の要素を含めることができます
  • transition-groupタグ内の要素は、key現在の要素の一意の識別子として属性を設定する必要があります。
  • それ以外の用途はtransitionタグと同じです
<template>
  <div id="app">
    <button @click="isEditing = !isEditing">切换</button>
    <transition-group appear>
      <h1 v-if="isEditing" key="save">Save</h1>
      <h1 v-if="!isEditing" key="edit">Edit</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       isEditing: true };
  },
};
</script>

<style>
h1 {
      
      
  transition: 3s;
  position: absolute;
}
.v-leave {
      
      
  opacity: 1;
}
.v-leave-to {
      
      
  opacity: 0;
}
.v-enter {
      
      
  opacity: 0;
}
.v-enter-to {
      
      
  opacity: 1;
}
</style>

6.JavaScriptフック機能

      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
  methods: {
    
  // --------
  // 进入中
  // --------

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

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

  beforeLeave: function (el) {
    console.log('beforeLeave');
    console.log(el);
  },
  leave: function (el, done) {
    console.log('leave');
    console.log(el);
    done()
  },
  afterLeave: function (el) {
    console.log('afterLeave');
    console.log(el);
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    console.log('leaveCancelled');
    console.log(el);
  }
  },

7、Vue はアニメーションのさまざまなメソッドを実装します

7.1 移行

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="fade">
      <p v-if="bol">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
      
      
  transition: all 3s;
}
.fade-enter,
.fade-leave-to {
      
      
  opacity: 0;
  width: 100px;
}
p {
      
      
  border: 1px solid red;
  width: 300px;
}
</style>

7.2 アニメーション + @キーフレーム

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="bounce">
      <p v-show="bol" class="demo">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>
<style>
.bounce-enter-active {
      
      
  animation: bounce-in 5s;
}
.bounce-leave-active {
      
      
  animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
      
      
  0% {
      
      
    transform: scale(0);
  }
  50% {
      
      
    transform: scale(1.5);
  }
  100% {
      
      
    transform: scale(1);
  }
}
</style>

7.3 animate.css

  1. インストール：npm install animate.css
  2. スタイル ライブラリをインポートします。import "animate.css"
  3. transition指定したタグにname属性を追加しますanimate_animate、animate__bounce
  4. 属性を設定しenter-active-class、エントリ アニメーションを指定します。スタイル ライブラリ内のエントリ スタイル値をenter-active-class属性値として選択します。
  5. leave-active-class終了アニメーションを指定するプロパティを設定します。スタイル ライブラリ内の終了スタイル値をleave-active-classプロパティ値として選択します。
<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="bol" name="animate_animate">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
      
      
  name: "TestDemo",
  data() {
      
      
    return {
      
       bol: true };
  },
};
</script>

7.4 JavaScript フック

  1. JavaScriptトランジションのみを使用する場合は、enterとでコールバックleaveを使用する必要があります。doneそれ以外の場合、これらは同期的に呼び出され、移行はすぐに完了します。
  2. JavaScriptトランジションのみを使用する要素の追加ではv-bind:css="false"、トランジションの検出をVueスキップすることをお勧めしますCSS。これにより、移行中の影響も回避されますCSS。

7.5 ベロシティ.js

  1. インストール：npm install velocity-animate
<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br />
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";

export default {
      
      
  name: "App",
  data: function () {
      
      
    return {
      
      
      show: true,
    };
  },
  methods: {
      
      
    beforeEnter: function (el) {
      
      
      el.style.opacity = 0;
    },
    enter: function (el, done) {
      
      
      Velocity(
        el,
        {
      
      
          rotateZ: "0deg",
          translateY: "0px",
          translateX: "0px",
          opacity: 1,
        },
        {
      
       complete: done }
      );
    },
    leave: function (el, done) {
      
      
      Velocity(
        el,
        {
      
      
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        {
      
       complete: done }
      );
    },
  },
};
</script>

7.6 複数の要素間の遷移

<template>
  <div id="example-2">
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
        Save
      </button>
      <button v-else key="edit" @click="isEditing = !isEditing">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      name: "TransitionTest",
      isEditing: false,
    };
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
      
      
  transition: all 1s;
}
.fade-enter {
      
      
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
      
      
  opacity: 0;
  transform: translateX(-50px);
}

#example-2 {
      
      
  position: relative;
  padding: 100px;
}
#example-2 button {
      
      
  position: absolute;
}
</style>

7.7 複数のコンポーネントの移行

<template>
  <div id="transition-components-demo">
    <button @click="view = 'VA'">a</button>
    <button @click="view = 'VB'">b</button>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
  </div>
</template>

<script>
import VA from "./VA.vue";
import VB from "./VB.vue";

export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      view: "VA",
    };
  },
  components: {
      
      
    VA,
    VB,
  },
};
</script>
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
      
      
  transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {
      
      
  opacity: 0;
}
</style>

7.8 forループをアニメーションさせる方法（リストの入口・出口遷移）

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {
   
   { item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
      
      
  name: "TransitionTest",
  data() {
      
      
    return {
      
      
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
      
      
    randomIndex: function () {
      
      
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      
      
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      
      
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style scoped>
.list-item {
      
      
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
      
      
  transition: all 1s;
}
.list-enter, .list-leave-to {
      
      
  opacity: 0;
  transform: translateY(30px);
}
</style>

参考

おすすめ

転載: blog.csdn.net/letianxf/article/details/129030335
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com