Vue中使用animate.css库
先来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在vue中使用Animate.css库title>
<link rel="stylesheet" href="../animate.css">
<script src="../vue.js">script>
<style>
@keyframes bounce-in {
0% {
transform:scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active { /*在div隐藏的过程中这个class是一直存在的*/
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{ /*在div显示的过程中这个class是一直存在的*/
transform-origin:left center;
animation: bounce-in 1s reverse;
}
style>
head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">hello worlddiv>
transition>
<button @click="handleClick">togglebutton>
div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
script>
body>
html>
代码解析：①使用@keyframes定义一个keyframes CSS3动画,以百分比来规定改变发生的时间,0% 是动画的开始时间，100% 动画的结束时间。
②在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。transform: scale(1.5)表示缩放倍数为1.5倍。
③在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
使用CSS3可以完成一些简单的动画效果，但是每次都需要自己手写既麻烦又伤脑，而引入animate.css库之后就不需要自己写动画的样式或者效果。
Animate.css是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求
在使用animate.css库之前，我们可以通过以下 attribute 来自定义过渡类名：
enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
例如上述代码可以使用自定义过渡类名:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在vue中使用Animate.css库title>
<link rel="stylesheet" href="../animate.css">
<script src="../vue.js">script>
<style>
@keyframes bounce-in {
0% {
transform:scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.active { /*在div隐藏的过程中这个class是一直存在的*/
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{ /*在div显示的过程中这个class是一直存在的*/
transform-origin:left center;
animation: bounce-in 1s reverse;
}
style>
head>
<body>
<div id="root">
<transition name="fade" enter-active-class="active" leave-active-class="leave">
<div v-if="show">hello worlddiv>
transition>
<button @click="handleClick">togglebutton>
div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
script>
body>
html>
Animate.css的简单使用：
1.首先要在官网下载animate.css 的文件：链接地址(https://daneden.github.io/animate.css)，然后将该文件通过link方式引入到html或者vue页面
2.在transition标签中自定义过渡类名，新定义的类名要包含 animated 动画名
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">Hello Worlddiv>
transition>
<button @click="handleClick">togglebutton>
注意：在3.x版本时，基本类 都是加animated ，在4.x版本 加 animate__animated，就是要加 animate__ 前缀。