关键词：
[动画] 如何在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-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动画库。
使用第三方动画库
当我们会了这种自定义方法后，就可以使用 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>
`
此时到浏览器中查看一下效果，这时候的文字就是蹦蹦跳跳的进入和退出页面的。
当然你也可以试试其他效果，比如 flash 和 heartBeat 都是非常不错的效果。
总结
这节我们学习了三个重要的知识点：
1、部分自定义动画CSS样式的方法
2、全部自定义动画CSS样式的方法
3、使用第三方CSS动画库来制作动画
vue2.0过度动画(代码片段)
...： 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库，如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库，如Velocity.js一、单元素/组件的过渡Vue提供了transition的... 查看详情
学习vue第十一节，使用使用其他动画库完成vue动画效果(代码片段)
https://animate.style/ animate.css<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="lib/vue-2.4.0.js"type="text/javascript"cha 查看详情
vue2中文文档：进入离开和列表过度(代码片段)
...以下工具：在CSS过渡和动画中自动处理class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js 单元素/组件的过渡Vue提供了 transitio 查看详情
第三方动画库使用方法
第三方动画库的使用1.名字叫:animate.css2.封装了很多工作中常用的动画3.在使用第三方时候,需要加上animated类名首先https://daneden.github.io/animate.css/下载animate.csslink进head中第一种方法<divclass="myWorld">我的世界</div><style>.my... 查看详情
09《vue入门教程》vue过渡&amp;动画
...效果与动画效果。包括如何编写自定义CSS动画、如何配合第三方CSS动画库、过渡钩子函数的使用、如何使用第三方JavaScript动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并... 查看详情
vue3学习随便记13(代码片段)
...法实现转换效果：自动为CSS过渡和动画应用class集成第三方CSS动画库，例如 Animate.css|Across-browserlibraryofCSSanimations.在过渡钩子期间使用JS直接操作DOM集成第三方JS动画库单个元素或组件的过渡Vue提供了transition封装组件（... 查看详情
vue3学习随便记13(代码片段)
...法实现转换效果：自动为CSS过渡和动画应用class集成第三方CSS动画库，例如 Animate.css|Across-browserlibraryofCSSanimations.在过渡钩子期间使用JS直接操作DOM集成第三方JS动画库单个元素或组件的过渡Vue提供了transition封装组件（... 查看详情
kissui.scrollanim页面滚动动画库插件(代码片段)
...通过bower来安装kissui.scrollanim插件。bowerinstallkissui.scrollanim使用方法在页面中引入scrollanim.css和scrollanim.js文件。< 查看详情
3.vue中导入animate.css动画库swiper轮播图组件
1.vue中导入animate.css动画库 2.vue中使用Swiper轮播图插件 注意：swiper常用设置 查看详情
text3d视差动画库(代码片段)
从0到1，开发一个动画库(代码片段)
传送门：从0到1，开发一个动画库(1)上一节讲到了最基础的内容，为动画构建“帧-值”对应的函数关系，完成“由帧到值”的计算过程。这一节将在上节代码的基础上谈谈如何给一个完整的动画添加各类事件。在添加各类事件之... 查看详情
推荐11个好用的js动画库(代码片段)
...流行的库提供了非常多的3D显示功能，以一种直观的方式使用WebGL。这个库提供了<canvas>、<svg>、CSS3D和WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出，目前仍有近1000名贡献者在开... 查看详情
uni-app引入css动画库
引入Animate动画库Animate中文网地址：http://www.animate.net.cn/Animate下载地址：https://daneden.github.io/animate.css/下载Animate.css在app.vue中引入动画库使用动画库：animated+动画End! 查看详情
用javascript实现三次贝塞尔动画库-前端组件化(代码片段)
...发现其他的参数都用上了。但是timingFunction我们是还没有使用上的。这里我们就来一起处理这个问题。timingFucntion这个逻辑主要是用在Animation的run方法中。如果大家还记得之前的一篇讲解CSS动画的文章，里面我们了解到三次贝... 查看详情
大标题在此
在CSS过渡和动画中自动处理class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js 查看详情
p25:react高级-react-transition-group动画库显示隐藏(代码片段)
...种必不可少的东西当然也不例外，React生态中有很多第三方的动画组件，你应该学习一下react-transition-group动画组件。目前我在工作中使用表现很好，可以满足日常动画开发需求。推荐的最重要理由是：这个也是reac... 查看详情
velocity.js动画库使用
...作，并和$.animate()有相同的API，但它不依赖jQuery，可单独使用。 2、兼容性可兼容到IE8和Android2.3。若需要兼容IE8，就必须引入jQuery1.x 3、示例代码(注意文件引用路径)（1）index.html<!DOCTYPEhtm 查看详情
wpfloading加载动画库
原文:WPFloading加载动画库 1.下载Dll??????https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA2.在项目中添加引用???????略3.在Xaml中引入名称空间?????xmlns:myLib="clr-namespace:MyLoadingLib;assembly=MyLoadingLib"4.使用代码??? 查看详情