码云学习 Vue3 2021-05-31

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

文章目录隐藏

自定义动画选择

方法一：给transition标签一个 name
方法二：自行制定 CSS 选择名称

使用第三方动画库
总结

这节我们一起学习一下，如何在 Vue 中使用第三方动画库Animate.css。它里边有很多已经写好的动画，可以给开发带来极大的方便。在学习第三方动画库使用前，我们要先学会一个知识，就是自定义 Vue 中固定的 CSS 动画选择器。

自定义动画选择

新建一个Demo41.html文件，代码如下。你也可以直接复制下面这段代码。复制好之后，可以在浏览器中查看一下执行的动画效果。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</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">码云笔记前端博客</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>

代码中使用了v-enter-active和v-leave-active，这些 CSS 中固定选择器的类名又臭又长，有没有办法自定义这些选择器的名称那。我这里讲两个方法，你们可以根据需要自行选择。

方法一：给transition标签一个 name

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

template: `  
    <transition name="mybj">
        <div v-if="isShow">码云笔记前端博客</div>
    </transition>
`

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

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

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

正如所说的，他只能修改部分 CSS 选择器（也就是前半部分），把v-enter-active改为了mybj-enter-active。这个在一个页面中有多个动画时，经常使用。

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

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

现在新写一个 CSS 样式，叫做come和go，代码跟v-enter-active和v-leave-active的 CSS 代码一样。

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

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

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

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

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

使用第三方动画库

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

这里先给出动画库的网址：点击这里

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

现在你要使用这个动画库，可以直接在 HTML 页面中引入 CDN 地址。

<head>
  <link
    rel="stylesheet"
    rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvYW5pbWF0ZS5jc3MvNC4xLjEvYW5pbWF0ZS5taW4uY3Nz"
  />
</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">码云笔记前端博客</div>
    </transition>
    <button @click="hanldClick">切换动画</button>
`

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

当然你也可以试试其他效果，比如flash和heartBeat都是非常不错的效果。

总结

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

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

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » 41. [动画]如何在Vue中使用第三方动画库Animate.css