Vue要素のアニメーショントランジションエフェクト例を詳しく解説

零下一度
リリース: 2018-05-14 15:58:03
オリジナル
3460 人が閲覧しました

この記事では主にアニメーショントランジション効果を実現するためのVue要素を紹介します。エディターに従って見てみましょう

1 vue で、v-show または を使用するときに、<code> <transition> タグを使用して単一のサブ要素を含めます。 v-if が表示と非表示を切り替える前に、まず子要素に一致する対応する class スタイルがあるかどうかを判断します: <transition> 标签包含着的单个子元素在使用 v-show v-if 切换显示隐藏前,会先判断是否有对应的 class 样式能匹配到该子元素上:

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redv-leave { margin-top: 50px; }
  redv-leave-active { transition: all 3s;}
  redv-leave-to { margin-top: 100px; opacity: 0;}
  redv-enter { margin-top: 50px; }
  redv-enter-active { transition: all 3s;}
  redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition>
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
</script>
</body>
ログイン後にコピー

  1. v-leave 当前元素准备从显示转变成隐藏,在动画开始前添加到元素上,动画一旦开始会立即删除;

  2. v-leave-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;

  3. v-leave-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;

事例中,当点击 button,p 并不会马上 display: none, 而是首先设置 v-leave ,下一刻即删除 v-leave ,同时添加 v-leave-active v-leave-to,当 v-leave-active 中的过渡时间执行完成,则删除 v-leave-active v-leave-to,同时添加 display: none。

  1. v-enter 当前元素准备从隐藏转变成显示,在动画开始前添加到元素上,动画一旦开始会立即删除;

  2. v-enter-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;

  3. v-enter-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;

事例中,当点击 button,p 马上清除 display: none, 然后设置 v-enter ,下一刻即删除 v-enter ,同时添加 v-enter-active v-enter-to,当 v-enter-active 中的过渡时间执行完成,则删除 v-enter-active v-enter-to。

2 自定义动画类名:

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redslide-leave { margin-top: 50px; }
  redslide-leave-active { transition: all 3s;}
  redslide-leave-to { margin-top: 100px; opacity: 0;}
  redslide-enter { margin-top: 50px; }
  redslide-enter-active { transition: all 3s;}
  redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition name="slide">
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
ログイン後にコピー

该效果与上一例效果完全一致的,transition 元素可以使用 name 属性来指定使用的类名前缀,从而代替 v-字段,例如事例中的 name="slide" 使本来的 v-enter 变成了 slide-enter

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  blue {background-color: blue; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s; animation: aslide 5s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <transition type="transition" >
    <p class="red" v-show="show"></p>
  </transition>
  <br>
  <transition type="animation" >
    <p class="blue" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
ログイン後にコピー

v-leave 現在の要素は表示から非表示に変更する準備ができています。アニメーションの開始前に要素に追加されますが、アニメーションが開始されるとすぐに削除されます。

v-leave-active アニメーションの移行プロセス中、要素は常にこのスタイルを持ち、アニメーションが開始されるまで自動的に削除されます。トランジションの効果を設定するために使用されます;

v-leave -to アニメーションのトランジションプロセス中、要素は常にこのスタイルを持ち、アニメーションが終了するまで自動的に削除されます。アニメーションの最終効果を設定します。

この場合、ボタンをクリックすると p は表示されません。すぐには none が表示されますが、v-leave が最初に設定され、次の瞬間に v-leave が削除されます。 -leave-active v-leave-to が同時に追加され、v-leave-active の遷移時間が完了すると、v-leave-active v- が削除され、display: none が追加されます。
  1. v-enter 現在の要素は、アニメーションの開始前に要素に追加され、アニメーションが開始されるとすぐに削除されます。アニメーション遷移プロセス中、要素は常にこのスタイルを持っています。このスタイルはアニメーションが終了するまで自動的に削除され、遷移の効果を設定するために使用されます。

  2. v-enter-to アニメーション遷移プロセス中、要素は常にこのスタイルは、アニメーションの最終効果を設定するために使用されます

この場合、p は表示を即座にクリアします: none。 v-enter を設定し、次の瞬間に v-enter を削除し、v-enter-active v-enter-to を追加します。 v -enter-active の遷移時間が完了すると、v-enter-active v-enter-toが削除されます。

2 カスタム アニメーション クラス名:

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <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"
    >
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog(&#39;-----------click---------&#39;);
    },
    beforeEnter: function (el) {
      consolelog(&#39;beforeEnter:&#39;);
    },
    enter: function (el, done) {
      consolelog(&#39;enter:&#39;);
      // done()
    },
    afterEnter: function (el) {
      consolelog(&#39;afterEnter:&#39;);
    },
    enterCancelled: function (el) {
      consolelog(&#39;enterCancelled:&#39;);
    },
    beforeLeave: function (el) {
      consolelog(&#39;beforeLeave:&#39;);
    },
    leave: function (el, done) {
      consolelog(&#39;leave:&#39;);
      done()
    },
    afterLeave: function (el) {
      consolelog(&#39;afterLeave:&#39;);
    },
    leaveCancelled: function (el) {
      consolelog(&#39;leaveCancelled:&#39;);
    }
  }
});
</script>
ログイン後にコピー
この効果は前の例とまったく同じです。 transition 要素は、 name 属性を使用してクラスを指定できます。たとえば、この例の name="slide" は、元の v-enter < になります。 /code> は <code> スライド入力 になります。

  1. 3 トランジションとアニメーションを同時に使用する場合

    <script src="/public/javascripts/vuejs"></script>
    <style>
    @keyframes aslide {
      0% {
        margin-left: 10px;
      }
      100% {
        margin-left: 100px;
      }
    }
      red {background-color: red; width: 100px; height: 100px;}
      apper { margin-top: 50px; }
      apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
    </style>
    <body>
    <p id="app">
      <transition
        appear 
        appear-class="apper" 
        appear-active-class="apper-active" 
        v-on:before-appear="customBeforeAppearHook"
        v-on:appear="customAppearHook"
        v-on:after-appear="customAfterAppearHook" >
        <p class="red" ></p>
      </transition>
      <button v-on:click="change">button</button>
    </p>
    <script>
    new Vue({
      el: &#39;#app&#39;,
      data: {
        show: true
      },
      methods: {
        change: function() {
          thisshow = !thisshow; 
          consolelog(&#39;-----------click---------&#39;);
        },
        customBeforeAppearHook: function (el) {
          consolelog(&#39;customBeforeAppearHook:&#39;);
        },
        customAppearHook: function (el) {
          consolelog(&#39;customAppearHook:&#39;);
          // done()
        },
        customAfterAppearHook: function (el) {
          consolelog(&#39;customAfterAppearHook:&#39;);
        }
      }
    });
    </script>
    ログイン後にコピー
  2. この場合、アニメーションはトランジションとアニメーションの両方のアニメーションを指定することができ、どちらのアニメーション時間を使用するかを指定できます。要素の終了時刻を指定しない場合は、アニメーション監視方法を指定した場合、最も長い時間が使用されます。
  3. 4 JavaScript監視アニメーション

  4. <script src="/public/javascripts/vuejs"></script>
    <style>
      v-enter-active { transition: all 15s;}
      v-enter-to { margin-top: 100px;}
      v-leave-active { transition: all 15s;}
      v-leave-to { margin-top: 10px;}
    </style>
    <body>
    <p id="app">
      <p class="show1">
        <transition>
          <button v-if="show1" @click="show1 = false">on</button>
          <button v-else @click="show1 = true">off</button>
        </transition>
      </p>
      <p class="show2">
        <transition>
          <button v-if="show2" key="on" @click="show2 = false">on</button>
          <button v-else key="off" @click="show2 = true">off</button>
        </transition>
      </p>
    </p>
    <script>
    var app = new Vue({
      el: &#39;#app&#39;,
      data: {
        show1: true,
        show2: true
      }
    });
    </script>
    ログイン後にコピー

jsイベントを使用すると、元のcssアニメーション遷移効果は無効になります

で v-bind:css="false" を設定すると、CSS アニメーション イベント コールバックを監視するための Vue の内部メカニズムが不要になり、パフォーマンスが向上します。


Enter イベントと Leave イベントは、done メソッドを手動で呼び出す必要があります。そうしないと、イベントは後続の after イベントを呼び出すことはありません。after イベントが呼び出されずに他のイベントが開始された場合、アニメーションはキャンセルされたとみなされます。


5 ページ初期化中のアニメーション:

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
  <p class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  }
});
</script>
ログイン後にコピー
ログイン後にコピー
🎜🎜🎜🎜🎜🎜Appear 属性は初期化アニメーションをオンにすることを示し、Appearance-class 属性は初期化前のスタイルを指定し、Appearance-active-class 属性は初期化アニメーション プロセスのスタイルを指定します。🎜🎜🎜🎜遷移アニメーションは初期化アニメーションでは有効になりませんが、アニメーション アニメーション 🎜🎜🎜🎜はイベント コールバックです。例を見ると明らかです。 。 🎜🎜🎜🎜🎜6 アニメーション要素のキー: 🎜🎜
<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1]
  }
});
</script>
ログイン後にコピー
ログイン後にコピー
🎜🎜🎜🎜show1 アニメーション効果がないのはなぜですか? vue は切り替えられる 2 つのボタンを同じ要素として認識しますが、ボタン内の異なるコンテンツを変更するだけなので、DOM 要素の切り替えは実際にはページ上で発生しません。 2 異なるボタン要素については、要素ごとに異なるキー属性値を指定します。 🎜🎜🎜🎜7 要素切り替えのアニメーションモード: 🎜🎜
<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
  <p class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  }
});
</script>
ログイン後にコピー
ログイン後にコピー


  1. transition 默认是同时执行2个元素的切换动画的,案例中红色的 off 按钮其实是会同时向左移动的,只是因为布局上没有脱离布局流,被 on 按钮顶住,无法移动;

  2. mode="in-out" 可以使切换元素先执行将要显示元素的动画,再执行将要隐藏元素的动画;

  3. mode="out-in" 可以使切换元素先执行将要隐藏元素的动画,再执行将要显示元素的动画;

8 多元素动画:

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1]
  }
});
</script>
ログイン後にコピー
ログイン後にコピー


  1. transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素,要想使用多个元素的动画,必须使用 transition-group;

  2. transition-group 默认会在 DOM 里渲染成 span 标签,可使用 tag="ul" 指定渲染成其他标签;

  3. transition-group 必须为每一个子元素指定 key;

8 多元素的位移动画:

<script src="/public/javascripts/vuejs"></script>
<style>
  v-move { transition: all 1s; }
</style>
<body>
<p id="app">
  <transition-group tag="ul" >
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemsreverse()">reverse</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1,2,3]
  }
});
</script>
ログイン後にコピー


  1. transition-group 允许在每个元素移动时,添加 v-move 的样式,移动完成后自动清除该样式;

  2. transition 的属性, transition-group 都有,包括 name enter leave;

以上がVue要素のアニメーショントランジションエフェクト例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!