[JavaScript知识库]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. 部分动画效果

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 向前和向后填充模式都被应用。