vue使用动画animate


vue使用动画animate

animate官网地址:https://animate.style/
matter-js

turnjs翻书消效果

(一)简介:

使用动画一般都是使用动画库吧,不然自己写吗?现在的库太多了,用的话很方便,但是确也一直限制住了自己,还是得自己去进去

(二)使用:

安装库

npm install animate.css --save

在main.js中引入使用

import animated from 'animate.css'
Vue.use(animated)

在页面文件上就可以通过class名称直接获取动画
在官网上可以直接通过复制获取class名称 进行动画展示

 

(三)切换展示动画

在使用的时候一般动画都是要首次进入才会展示动画 ,但有时候我们需要进行手动触发一下,所以我们就显示隐藏一下。
这样就可以:

 this.showHide = false;
 setTimeout(() => {
    this.showHide = true;
 }, 100);

在这里插入图片描述

(四)滚动到指定位置展示动画

需要使用插件 但是我没有测试过

npm install wowjs --save-dev

相关