第三方动画库animation.css

2022-01-29 09:33:14 阅读：737 来源： 互联网

标签：动画 animation animate 官网 class css

第三方动画库animation

animation.css是一个现成的跨浏览器动画库，能够帮助开发者快速的实现一些很炫酷的动画效果
官网地址：https://animate.style
使用步骤：
一、安装
使用 npm 安装：

$ npm install animate.css --save

引入：

import 'animate.css'

或者在html文件中通过link标签引入：

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

二、用法：
1.给transition标签添加name属性值为animate__animated animate__bounce，一定要加！！！

//html
<div>
	<button @click="isShow=!isShow" style="backgroundColor:orange">显示隐藏</button>
	<transition-group name="animate__animated animate__bounce" appear><!--//appear属性,初始显示时动画显示-->
		<h1 v-show="isShow" key="1">你好啊！</h1>
		<h1 v-show="isShow" key="2">我挺好的！</h1>
	</transition-group>
</div>

export default{
	data(){
		return{
			isShow:true,//默认显示
		}
	}
}

2.添加动画
enter-active-class代表进入的动画，leave-active-class代表离开时的动画。我们可以在animation动画库的官网 animation官网找到自己想要的动画效果，直接复制class名添加到我们的项目中就可以了
在这里插入图片描述
添加动画class

标签：动画,animation,animate,官网,class,css
来源： https://blog.csdn.net/Liberty_yes/article/details/122728593

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第三方动画库animation.css

第三方动画库animation