1.前言
为了让页面滚动更有趣得自己手写CSS过渡动画,但是自己手写CSS过渡太麻烦。大佬制作的wow.js+Animate.css就解决了这个问题。
2.安装信息
我使用了对应的模块包,我的安装模块的版本如下。请按照我的版本进行安装。否则可能会有函数用法区别导致无法使用。
{
"name": "blogvuets",
"version": "0.0.0",
"private": true,
"scripts": {
"serve": "vite",
"build": "vite build",
"test:unit": "vitest",
"dev": "vite",
"preview": "vite preview",
"lint": "vue-cli-service lint",
"publish": "vue-cli-service build && vue-cli-service build --mode test",
"test": "vue-cli-service build --mode test && npm run serve -s dist",
"production": "vue-cli-service build --mode production && npm run serve -s dist"
},
"dependencies": {
"@unhead/vue": "^1.8.9",
"@vitejs/plugin-vue": "^4.3.4",
"animate.css": "^4.1.1",
"axios": "^1.5.0",
"core-js": "^3.8.3",
"element-plus": "^2.4.0",
"fingerprintjs2": "^2.1.4",
"grecaptcha": "^1.0.3",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",
"markdown-it": "^13.0.1",
"os": "^0.1.2",
"typeit": "^8.7.1",
"undraw-ui": "^1.0.2",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.9",
"vue": "^3.2.25",
"vue-jwt-decode": "^0.1.0",
"vue-recaptcha": "^3.0.0-alpha.2",
"vue-router": "^4.0.13",
"vue3-recaptcha2": "^1.8.0",
"vuex": "^4.0.0",
"vuex-persistedstate": "^4.1.0",
"wow.js": "^1.2.2",
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"typescript": "~4.5.5"
}
}
请检查下面的包是否是对应版本。下面就以我的版本进行安装
- wow.js 用来重复输出动画
- Animate.css 更多输出CSS动画
main.ts设置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createHead } from '@unhead/vue'
//请按照下面的方法引入CSS，否则可能无法使用
import "animate.css"
//不加这个引入的话可能会导致其他动画无法使用
import 'animate.css/animate.compat.css'
const head = createHead()
createApp(App).use(store).use(router).use(UndrawUi).use(ElementPlus).use(head).mount('#app')
3.其他页面使用动画
随后。我们可以在任何页面中引入模块。
<script setup >
onMounted(() => {
const wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',//这里非常重要请按照示例填写
offset: 0,
mobile: true,
live: true,
scrollContainer: null,
resetAnimation: true,
callback: function(box) {
//这个地方可以写动画完成的回调
},
})
wow.init();
loadData(currentPage.value);
});
<script>
<el-card class="wow animate__bounce bounceInDown box-card" data-wow-duration="4s" shadow="hover" id="main-boxcard" style="display: flex; flex-direction: column; height: 99%;"></el-card>
//注意此处一定要引入这个css否则可能无法使用
<style src="wow.js/css/libs/animate.css"></style>
各个参数的含义
- boxClass：当用户滚动时显示隐藏框的类名。
- animateClass：触发 CSS 动画的类名（animate.css 库默认为“animated”）
- offset：定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达此距离时，隐藏框就会显示出来。
- mobile：在移动设备上打开/关闭 wow.js。
- live：不断检查页面上是否有新的 WOW 元素。
4.其他配置
wow高级配置项
- data-wow-duration：更改动画的持续时间
- data-wow-delay：动画开始之前的延迟
- data-wow-offset：启动动画的距离（与浏览器底部有关）
- data-wow-iteration：动画的次数重复
Animate.css动画
fade: {
title: '淡入淡出',
fadeIn: '淡入',
fadeInDown: '向下淡入',
fadeInDownBig: '向下快速淡入',
fadeInLeft: '向右淡入',
fadeInLeftBig: '向右快速淡入',
fadeInRight: '向左淡入',
fadeInRightBig: '向左快速淡入',
fadeInUp: '向上淡入',
fadeInUpBig: '向上快速淡入',
fadeOut: '淡出',
fadeOutDown: '向下淡出',
fadeOutDownBig: '向下快速淡出',
fadeOutLeft: '向左淡出',
fadeOutLeftBig: '向左快速淡出',
adeOutRight: '向右淡出',
fadeOutRightBig: '向右快速淡出',
fadeOutUp: '向上淡出',
fadeOutUpBig: '向上快速淡出'
}, bounce: {
title: '弹跳类',
bounceIn: '弹跳进入',
bounceInDown: '向下弹跳进入',
bounceInLeft: '向右弹跳进入',
bounceInRight: '向左弹跳进入',
bounceInUp: '向上弹跳进入',
bounceOut: '弹跳退出',
bounceOutDown: '向下弹跳退出',
bounceOutLeft: '向左弹跳退出',
bounceOutRight: '向右弹跳退出',
bounceOutUp: '向上弹跳退出'
}, zoom: {
title: '缩放类',
zoomIn: '放大进入',
zoomInDown: '向下放大进入',
zoomInLeft: '向右放大进入',
zoomInRight: '向左放大进入',
zoomInUp: '向上放大进入',
zoomOut: '缩小退出',
zoomOutDown: '向下缩小退出',
zoomOutLeft: '向左缩小退出',
zoomOutRight: '向右缩小退出',
zoomOutUp: '向上缩小退出'
}, rotate: {
title: '旋转类',
rotateIn: '顺时针旋转进入',
rotateInDownLeft: '从左往下旋入',
rotateInDownRight: '从右往下旋入',
rotateInUpLeft: '从左往上旋入',
rotateInUpRight: '从右往上旋入',
rotateOut: '顺时针旋转退出',
rotateOutDownLeft: '向左下旋出',
rotateOutDownRight: '向右下旋出',
rotateOutUpLeft: '向左上旋出',
rotateOutUpRight: '向右上旋出'
}, flip: {
title: '翻转类',
flipInX: '水平翻转进入',
flipInY: '垂直翻转进入',
flipOutX: '水平翻转退出',
flipOutY: '垂直翻转退出'
}, strong: {
title: '强调类',
bounce: '弹跳',
flash: '闪烁',
pulse: '脉冲',
rubberBand: '橡皮筋',
shake: '左右弱晃动',
swing: '上下摆动',
tada: '缩放摆动',
wobble: '左右强晃动',
jello: '拉伸抖动'
}
5.结尾
更多的详细用法可以查看github首页。
wow仓库
animate.css仓库
评论区