41 Vue使用第三方动画库

小咪咪 2023-10-06 20:42 11阅读 0赞

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

*  阐述
 *  自定义动画选择
 *   *  方法一：给 transition 标签一个 name
     *  方法二：自行制定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-active` 和 `v-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样式，叫做 `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`动画库。

![在这里插入图片描述][cc605eb94a464243b90e157c2cfc555a.gif_pic_center]

## 使用第三方动画库 ##

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

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

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

![在这里插入图片描述][467eb9139f334b2abe9d513bc15ce22c.gif_pic_center]  
现在你要使用这个动画库，可以直接在HTML页面中引入CDN地址。

然后在想有动画的标签上面加上 `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>
    `

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

![在这里插入图片描述][0c3ce7fc0e5d49b182dc7b8d5b90fa22.gif_pic_center]

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

## 总结 ##

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

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

[cc605eb94a464243b90e157c2cfc555a.gif_pic_center]: https://img-blog.csdnimg.cn/cc605eb94a464243b90e157c2cfc555a.gif#pic_center
[467eb9139f334b2abe9d513bc15ce22c.gif_pic_center]: https://img-blog.csdnimg.cn/467eb9139f334b2abe9d513bc15ce22c.gif#pic_center
[0c3ce7fc0e5d49b182dc7b8d5b90fa22.gif_pic_center]: https://img-blog.csdnimg.cn/0c3ce7fc0e5d49b182dc7b8d5b90fa22.gif#pic_center