第三方动画库animation.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>
		<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名添加到我们的项目中就可以了
第三方动画库animation.css_第1张图片
第三方动画库animation.css_第2张图片

你可能感兴趣的:(CSS,css,动画,css3)