其他分享
首页 > 其他分享> > 41 Vue使用第三方动画库

41 Vue使用第三方动画库

作者:互联网

[动画] 如何在Vue中使用第三方动画库 Animate.css

阐述

这节我们一起学习一下,如何在Vue中使用第三方动画库 Animate.css

它里边有很多已经写好的动画,可以给开发带来极大的方便。

在学习第三方动画库使用前,我们要先学会一个知识,就是自定义Vue中固定的CSS动画选择器。

自定义动画选择

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        @keyframes comein{
            0%{
                transform :translateX(-120px)
            }
            100%{
                transform :translateX(0px)
            }
        }
        @keyframes comeout{
            0%{
                transform :translateX(0px)
            }
            100%{
                transform :translateX(-120px)
            }
        }
        .v-enter-active{
            animation: comein 1s;
        }
        .v-leave-active{
            animation: comeout 1s;
        }

    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow = ! this.isShow
            }
        },
        template: `  
        <transition>
            <div v-if="isShow">willem</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>
</html>

代码中使用了 v-enter-activev-leave-active,这些CSS中固定选择器的类名又臭又长,有没有办法自定义这些选择器的名称那。

我这里讲两个方法,你们可以根据需要自行选择。

方法一:给 transition 标签一个 name

这种形式也叫做部分更改,就是通过给 <transition> 标签一个 name 属性,然后CSS选择器也要跟着变化。比如先把 template 中的 <transition> 标签,加入 name='willembj'

template: `  
    <transition name="willembj">
        <div v-if="isShow">willem</div>
    </transition>
`

这时候你去浏览器中预览,发现所有的动画已经不能在使用了。
那这时候你需要把CSS选择器改为.willembj-enter-active.willembj-leave-active,此时的CSS代码如下。

.willembj-enter-active{
    animation: comein 1s;
}
.willembj-leave-active{
    animation: comeout 1s;
}

这时候再去浏览器中看效果,动画效果就又恢复到了正常。

正如所说的,他只能修改部分CSS选择器(也就是前半部分),把 v-enter-active 改为了willembj-enter-active

这个在一个页面中有多个动画时,经常使用。

方法二:自行制定CSS选择名称

这种方法,就是在 <transition> 标签中直接指定一个CSS样式,在工作中这种方法使用较多,灵活性也比较强。

现在新写一个CSS样式,叫做 comego,代码跟 v-enter-activev-leave-active的CSS代码一样。

.come{
    animation: comein 1s;
}
.go{
    animation: comeout 1s;
}

有了这两段CSS代码后,可以删除上面的 v-enter-activev-leave-active 的样式,目的是不混淆,防止小伙伴误会。

然后在 template 代码中,加入 enter-active-classleave-active-class 属性,并指定名称。

template: `  
    <transition 
        enter-active-class="come"
        leave-active-class="go"
    >
        <div v-if="isShow">码云笔记前端博客</div>
    </transition>
`

使用自定义名称可以定义一些比较复杂的动画,也可以使用第三方动画库,比如Animate.css动画库。

在这里插入图片描述

使用第三方动画库

当我们会了这种自定义方法后,就可以使用 Animate.css 这样的动画库了。

这里先给出动画库的网址:https://animate.style

直接进入动画库,可以看到在网页的左侧,有很多的动画效果,你可以点击进行预览。

在这里插入图片描述
现在你要使用这个动画库,可以直接在HTML页面中引入CDN地址。

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

然后在想有动画的标签上面加上 animate__animated 和其他你想要的的动画效果,比如animate__bounce (跳动的动画),就可以实现一个酷炫的CSS动画效果了。

template: `  
    <transition 
        enter-active-class="animate__animated animate__bounce"
        leave-active-class="animate__animated animate__bounce"
    >
        <div v-if="isShow">willem</div>
    </transition>
    <button @click="hanldClick">切换动画</button>
`

此时到浏览器中查看一下效果,这时候的文字就是蹦蹦跳跳的进入和退出页面的。

在这里插入图片描述

当然你也可以试试其他效果,比如 flashheartBeat 都是非常不错的效果。

总结

这节我们学习了三个重要的知识点:

1、部分自定义动画CSS样式的方法
2、全部自定义动画CSS样式的方法
3、使用第三方CSS动画库来制作动画

标签:动画,Vue,自定义,41,leave,enter,active,CSS
来源: https://blog.csdn.net/weiguang102/article/details/121752315