Vue学习：使用animate.css库并与过度、Velocity.js结合

最新推荐文章于 2025-04-19 23:18:36 发布

Licheng Xu

最新推荐文章于 2025-04-19 23:18:36 发布

阅读量299

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43912883/article/details/102925688

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

Vue学习：使用animate.css库并与过度、Velocity.js结合

一、使用keyframes动画

1.1 未自定义命名需求

这里transition的name为fade，则会命名需要为fade-enter-active、fade-leave-active

        <style>
            @keyframes bounce-in{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(0);
                }
            }

            .fade-enter-active{
                transform-origin: left center;
                animation:bounce-in 1s;
            }
 
            .fade-leave-active{
                transform-origin: left center;
                animation:bounce-in 1s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition name="fade">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

1.2 自定义命名需求

利用enter-active-class、leave-active-class等

        <style>
            @keyframes bounce-in{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(0);
                }
            }
            .active{
                transform-origin: left center;
                animation:bounce-in 1s;
            }
            .leave{
                transform-origin: left center;
                animation:bounce-in 1s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition name="fade" enter-active-class="active" leave-active-class="leave">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

二、使用Animate.css库

2.1 下载css

地址：https://daneden.github.io/animate.css/ ，将animate.css库下载到本地项目中

2.2 引入

<link rel="stylesheet" type="text/css" href="./animate.min.css">

2.3 入场出场的active类名使用animated

类型写成animated表明你需要使用animated库

<transition name="fade" enter-active-class="animated" leave-active-class="animated">

2.4 填写你需要使用的效果

进场效果选择swing，出场效果选择shake

        <div id="app">
            <div id="root">
                <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>

2.5 让页面第一次加载的时候也显示动画

appear表明第一次显示也要用到效果，appear-active-class表明需要使用的动画

        <div id="app">
            <div id="root">
                <transition name="fade"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing"
                leave-active-class="animated shake"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>

三、同时使用过度与动画

3.1 结合动画

这里的opacity执行是3秒，但是animated动画看源文件会发现动画是1s

    <head>
        <meta charset="UTF-8">
        <title>Hello Derrick</title>
        <script src="./vue.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.min.css">
        <style>
            .fade-enter,
            .fade-leave-to{
                opacity: 0;
            }
            .fade-enter-active,
            .fade-leave-active{
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition name="fade"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

3.2 手动设置时间

Vue会发现transition动画是3秒，amination是1秒，我们可以手动的设置时间，利用type表明以transition动画的时间为准

            <div id="root">
                <transition
                type="transition"
                name="fade"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>

3.3 自定义时长

:duration自定义动画时长

        <div id="app">
            <div id="root">
                <transition
                :duration="10000"
                name="fade"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>

:duration还可以规定入场动画时长、出场动画时长

        <div id="app">
            <div id="root">
                <transition
                :duration="{enter:5000,leave:10000}"
                name="fade"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>

四、Vue提供的动画钩子js

4.1 @before-enter、@enter、@after-enter，enter可改为leave

4.1.1 绑定

    <body>
        <div id="app">
            <div id="root">
                <transition
                :duration="{enter:5000,leave:10000}"
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
                appear
                appear-class="animated swing"
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>

4.1.2 函数

可以在函数中接收参数el，el代表为被transition包裹的标签，这里即div，done代表回调函数,done用于告诉vue动画执行完毕，这时候会调用after-enter，handleBeforeEnter结束后便是enter

   <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                },
                handleBeforeEnter:function(el){
                    //el代表为被transition包裹的标签，这里即div
                    el.style.color='red'
                },
                //el代表为被transition包裹的标签，这里即div
                //done代表回调函数,done用于告诉vue动画执行完毕，这时候会调用after-enter
                //handleBeforeEnter结束后便是enter
                handleEnter:function(el,done){
                    setTimeout(()=>{
                        el.style.color='blue'
                    },2000)
                    setTimeout(()=>{
                        done()
                    },4000)
                },
                handleAfterEnter:function(el){
                    el.style.color="#000"
                }
            }
        })
    </script>

4.2 VelocityJs动画

4.2.1 下载地址

http://www.velocityjs.org/

4.2.2 引入

<script src="./velocity.js"></script>

4.2.3 使用

    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                },
                handleBeforeEnter:function(el){
                    el.style.opacity = 0;
                },
                handleEnter:function(el,done){
                    Velocity(el,
                    {opacity:1},
                    {duration:1000,complete:done})
                },
                handleAfterEnter:function(el){
                    alert("动画结束")
                }
            }
        })
    </script>