ホームページ >ウェブフロントエンド >jsチュートリアル >vue.js コントロールアニメーションの実装
vue.js コントロールアニメーションの実装
- 巴扎黑オリジナル
- 2017-07-23 15:02:551948ブラウズ
前回、vue を使用してトランジション アニメーションを実装することについて説明しましたが、実際には、js を使用せずに、vue に付属する CSS 状態制御アニメーションを使用して実装されています。 vue、別の方法があります アニメーションの実装を制御する方法は、
js を使用してアニメーション
の 3 つの状態を制御することです
: before-enter= "name" アニメーションが入る前
:enter="name" アニメーションが入った後
:leave="name" アニメーションが入って終了します
例を見てください
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="http://tool.oschina.net/js/jquery/jquery-1.7.2.js?1.1.11"></script><script src="https://unpkg.com/vue/dist/vue.js?1.1.11"></script></head><style>#app{position: relative;width: 100%;height: 30px;}.animate-p{position: absolute;top: 0px;left: 0px;}</style><body><div id="app"><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><span class="animate-p" v-show="show">快看啦</span></transition><br> <button @click="show =! show">toggle</button></div>
</body></html>
html の部分はアニメーションのため、制御には jquery のアニメーション関数を使用しました。今後 vue で何かを作成するときは、代わりに vue を使用するようにしてください。 jquery 上記では、vue の組み込みアニメーション コンポーネント トランジションを使用し、アニメーションの 3 つの状態をバインドしました
v-on:before-enter="beforeEnter"
v-on:enter ="enter"v-on:leave="leave"
v-bind:css ="false"
>
前回と同じ写真ですが、入場前、入場中、入力したら
今度は制御するjs部分を書き始めます
new Vue({
el:'#app',
data:{
show:true},
methods: {//进入之前beforeEnter: function(el){
$(el).css({
left:"-500px",
opacity:0})
},//进入中enter: function(el,done){
$(el).stop().animate({
left:0,
opacity:1},{
duration:1500,
complete:done
},5000)
},//结束leave: function(el,done){
$(el).stop().animate({
left:"500px",
opacity:0},{
duration:1500,
complete:done
},5000)
}
}
});
3つのアニメーション状態に対応します。
以上がvue.js コントロールアニメーションの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。