vue.js コントロールアニメーションの実装-jsチュートリアル-php.cn

vue.js コントロールアニメーションの実装

巴扎黑

リリース： 2017-07-23 15:02:55

オリジナル

1853 人が閲覧しました

前回、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 サイトの他の関連記事を参照してください。