#前端开发# 【一】 之Animate动画库的安装及详细用法

#前端开发# 之Animate动画库的安装及详细用法

在前端的开发过程中，我们免不了需要动画来实现更多酷炫效果，
下面主要是介绍Animate这款强大的动画库，以及其安装及使用

相信大家也已经了解过Animate，这里就不赘述了~~
下面是Animate的官网

一.官网各个版块的主要作用

温馨提示：如果英文不怎么好的胖友，
也可以使用谷歌自带的网页翻译器，将官网翻译成中文，
最好就看英文文档啦，顺便练一下英文哈哈哈哈哈哈哈

二.Animate的使用

在vue里使用
（1）安装
在ws下面这个位置，输入cnpm install animate.css --save

cnpm install animate.css --save

（2）在main.js中引用并使用

import animate from 'animate.css'

Vue.use(animate);

具体在这些位置进行引用


下面是最后一步，也是最重要的一步，我们要进行使用

（3）使用并使用类名

举个例子，
需求：点击p标签，就可以触发动画

<div>
    <p class="shadow-drop-2-bl">动画盒子</p>
<!-- 直接使用Animate中的动画class名，注意：必须使用在Animate选取样式的class名，否则动画会无效 -->
</div>
<style scoped>
// 加入hover,就可以让鼠标经过p标签时，就可以触发动画
.shadow-drop-2-bl：hover {
	-webkit-animation: shadow-drop-2-bl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-bl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-5-25 23:4:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-drop-2-bl
 * ----------------------------------------
 */
@-webkit-keyframes shadow-drop-2-bl  {
  0% {
    -webkit-transform: translateZ(0) translateX(0) translateY(0);
            transform: translateZ(0) translateX(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);
            transform: translateZ(50px) translateX(12px) translateY(-12px);
    -webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-bl {
  0% {
    -webkit-transform: translateZ(0) translateX(0) translateY(0);
            transform: translateZ(0) translateX(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);
            transform: translateZ(50px) translateX(12px) translateY(-12px);
    -webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}

</style>

以上，完毕。