vue脚手架和animate的结合使用

vue脚手架和animate的结合使用

安装

npm install animate.css --save

配置

在main.js引入

引入后在组件中直接就可以使用了

在main.js中引入animate.css

import './assets/animate.css'

vue动画效果

• v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

动画属性

1、animation-name：指定要绑定到选择器的关键帧的名称。
2、animation-duration：定义动画完成一个周期需要多少秒或毫秒
3、animation-timing-function：指定动画将如何完成一个周期。
4、animation-delay：属性定义动画什么时候开始。
5、animation-iteration-count ：定义动画应该播放多少次。
6、animation-direction：定义是否循环交替反向播放动画。
7、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
8、animation-play-state：指定动画是否正在运行或已暂停。

扩展软件aos

第一步 安装axios到生产环境：

 npm i aos

第二步 在main.js导入axios对象

import AOS from "aos";
Vue.use(AOS)

引入aos

import AOS from "aos";
import "aos/dist/aos.css";
AOS.init(); 初始化数据

然后就可以在html代码中直接使用

简单示例

 <div data-aos="fade-up" class="class"></div> 盒子下滑展示
 .class {
  width: 100px;
  height: 100px;
  background-color: orange;
}

width: 100px;
height: 100px;
background-color: orange;
}