vue学习（十九）动画

矫情吗；* 2022-04-18 02:05 220阅读 0赞

1，vue结合velocity.js现实动画  [http://velocityjs.org/][http_velocityjs.org]

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Vue中的 Js 动画与 Velocity.js 的结合&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;script src="velocity.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition:opacity 3s ;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition:opacity 3s ;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;transition name="fade"
            @before-enter="handleBefore"
            @enter="handleEnter"
            @after-enter="handleAfter"
        &gt;
            &lt;div v-if="show"&gt;hello  world&lt;/div&gt;
        &lt;/transition&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                },
                handleBefore:function(el){
                    /*el.style.color='red'*/
                    el.style.opacity=0;
                },
                handleEnter:function (el,done) {
                   /* setTimeout(function () {
                        el.style.color='green'
                    },2000)
                    setTimeout(function () {
                       done()
                    },4000)*/
                   Velocity(el,{
                       opacity:1
                   },{
                       duration:1000,
                       complete: done
                   })
                },
                handleAfter:function(el){
                    /*el.style.color='black'*/
                    console.log("动画结束")
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

2，Vue中同时使用过渡和动画

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Vue中同时使用过渡和动画&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="animate.css"/&gt;
    &lt;style&gt;
        @keyframes bunch-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }
       .fade-enter-active{
           animation: bunch-in 2s;
       }
        .fade-leave-active{
            animation: bunch-in 2s;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;!-- css5实现过渡效果--&gt;
        &lt;!--&lt;transition name="fade"&gt;
            &lt;div v-if="show"&gt;hello  world&lt;/div&gt;
        &lt;/transition&gt;
        &lt;hr/&gt;--&gt;
        &lt;!--type="transition"--&gt;
        &lt;transition
                :duration="5000"
                    name="fade"
                    enter-active-class="animated bounce fade-enter-active"
                    leave-active-class="animated zoomIn fade-leave-active"
                    appear appear-active-class="animated zoomIn"
        &gt;
            &lt;div v-if="show"&gt;hello  world&lt;/div&gt;
        &lt;/transition&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

3，Vue中多个元素或组件的过渡

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Vue中多个元素或组件的过渡&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition:opacity 3s ;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition:opacity 3s ;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;transition name="fade" mode="out-in"&gt;
            &lt;div v-if="show" key="world"&gt;hello  world&lt;/div&gt;
            &lt;div v-if="!show" key="sss"&gt;hello  sss&lt;/div&gt;
        &lt;/transition&gt;

&lt;transition name="fade" mode="out-in"&gt;
            &lt;child-one v-if="show"&gt;&lt;/child-one&gt;
          &lt;child-two v-if="!show"&gt;&lt;/child-two&gt;
        &lt;/transition&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.component('child-one',{
            template:'&lt;div&gt;child-one&lt;/div&gt;'
        })

Vue.component('child-two',{
            template:'&lt;div&gt;child-two&lt;/div&gt;'
        })
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

4，Vue中的列表过渡

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Vue中的列表过渡&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition:opacity 3s ;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition:opacity 3s ;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;transition-group name="fade"&gt;
            &lt;div v-for="item of list" :key="item.id"&gt;
                {
       {item.name}} {
       {item.id}}
            &lt;/div&gt;
        &lt;/transition-group&gt;

&lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false,
                list:[],
                count:0
            },
            methods:{
                handleClick:function () {
                    this.count=this.count+1
                   this.list.push({
                       id:this.count,
                       name:'hello world'
                   })
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

5，Vue中的动画封装

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .fade-enter{
            opacity: 0;
        }
        .fade-enter-active{
            transition:opacity 3s ;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition:opacity 3s ;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;

&lt;fade :show="show"&gt;
            &lt;div&gt;hello  world&lt;/div&gt;
        &lt;/fade&gt;

&lt;fade :show="show"&gt;
            &lt;h1&gt;hello  world&lt;/h1&gt;
        &lt;/fade&gt;
        &lt;button @click="handleClick"&gt;按钮&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;
        Vue.component('fade',{
            props:['show'],
            template:'&lt;div&gt;' +
            '&lt;transition name="fade"&gt;' +
            '&lt;slot v-if="show"&gt;&lt;/slot&gt;' +
            '&lt;/transition&gt;' +
            '&lt;/div&gt;'
        })

[http_velocityjs.org]: http://velocityjs.org/