vue 中 animation 使用

简介

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。

兼容

浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

官方地址:

github 地址：https://github.com/daneden/animate.css

官方操作文档:https://animate.style/

1. npm安装

npm install animate.css --save 
or
cnpm install animate.css --save

2. 或者yarn安装

yarn add animate.css

3. 或者html引入

<link rel="stylesheet" href="animate.min.css">

4. 在需要的页面中引入或在main.js全局使用

import animate from animate.css

5. 部分动画效果

动画效果属性名	中文含义
fadeIn	淡入
fadeInDown	向下淡入
fadeInDownBig	向下快速淡入
fadeInLeft	向右淡入
fadeInLeftBig	向右快速淡入
fadeInRight	向左淡入
fadeInRightBig	向左快速淡入
fadeInUp	向上淡入
fadeInUpBig	向上快速淡入
fadeOut	淡出
fadeOutDown	向下淡出
fadeOutDownBig	向下快速淡出
fadeOutLeft	向左淡出
fadeOutLeftBig	向左快速淡出
adeOutRight	向右淡出
fadeOutRightBig	向右快速淡出
fadeOutUp	向上淡出
fadeOutUpBig	向上快速淡出
bounceIn	弹跳进入
bounceInDown	向下弹跳进入
bounceInLeft	向右弹跳进入
bounceInRight	向左弹跳进入
bounceInUp	向上弹跳进入
bounceOut	弹跳退出
bounceOutDown	向下弹跳退出
bounceOutLeft	向左弹跳退出
bounceOutRight	向右弹跳退出
bounceOutUp	向上弹跳退出
zoomIn	放大进入
zoomInDown	向下放大进入
zoomInLeft	向右放大进入
zoomInRight	向左放大进入
zoomInUp	向上放大进入
zoomOut	缩小退出
zoomOutDown	向下缩小退出
zoomOutLeft	向左缩小退出
zoomOutRight	向右缩小退出
zoomOutUp	向上缩小退出
rotateIn	顺时针旋转进入
rotateInDownLeft	从左往下旋入
rotateInDownRight	从右往下旋入
rotateInUpLeft	从左往上旋入
rotateInUpRight	从右往上旋入
rotateOut	顺时针旋转退出
rotateOutDownLeft	向左下旋出
rotateOutDownRight	向右下旋出
rotateOutUpLeft	向左上旋出
rotateOutUpRight	向右上旋出
flipInX	水平翻转进入
flipInY	垂直翻转进入
flipOutX	水平翻转退出
flipOutY	垂直翻转退出
bounce	弹跳
flash	闪烁
pulse	脉冲
rubberBand	橡皮筋
shake	左右弱晃动
swing	上下摆动
tada	缩放摆动
wobble	左右强晃动
jello	拉伸抖动

6. 使用方法

home.vue

  <template>
  <div class="home">
	  <div class="test">这是测试div>
  div>
template>

<script>
export default {
  name: "Home",
  data(){
    return {
      title:'Home组件'
    }
  },
}
script>

<style scoped>
/* scoped  */
.test{
   animation-name:fadeInLeft ; /*fadeInLeft为要使用的动画效果名，在这里不需要加animate前缀*/
  animation-duration: 3s; /*这里设定完成该动画的时间*/
}

style>

animation 参数：

css3 animation

// animation 参数

• animation-name 规定需要绑定到选择器的 keyframe 名称。

• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

• animation-timing-function 规定动画的速度曲线。

  • linear 动画从头到尾的速度是相同的。
  • ease 默认。动画以低速开始，然后加快，在结束前变慢
  • ease-in 动画以低速开始。
  • ease-out 动画以低速结束。
  • ease-in-out 动画以低速开始和结束。

• cubic-bezier(x1, y1, x2, y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

函数说明：https://segmentfault.com/a/1190000004618375

• animation-delay 规定在动画开始之前的延迟。

• animation-iteration-count 规定动画应该播放的次数。

• animation-direction 规定是否应该轮流反向播放动画。

  • normal 默认值。动画应该正常播放。
  • alternat 动画应该轮流反向播放。

• animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

  • none 不改变默认行为。

  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

  • both 向前和向后填充模式都被应用。