Vue 与各种动画组件的整合使用
Animate.css 安装
# 安装
pnpm add animate.css
# 在main.ts中引入
import 'animate.css';
animated 的各个动画 class 属性
json
slide:{
title: '幻灯片',
slideInDown: '幻灯片从下方进入',
slideInLeft:'幻灯片从左方进入',
slideInRight:'幻灯片从右方进入',
slideInUp:'幻灯片向上滑动进入',
slideOutDown:'幻灯片从下方离开',
slideOutLeft:'幻灯片从左方离开',
slideOutRight:'幻灯片从右方离开',
slideOutUp:'幻灯片向上滑动离开'
},
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: '拉伸抖动'
}
Animate.css 使用实例
scrollreveal 安装
ScrollReveal-元素随页面滚动产生动画的 js 插件
# 安装(因为wowjs依赖animate.css所以需要同时安装animate.css)
pnpm add @types/scrollreveal -D
pnpm add scrollreveal
注意事项：
你需要注意的重要的一点是尽可能在页面的最后再调用 ScrollReveal
- 页面中的 DOM 元素已经被加载完成
- 任何第三方的 js 库已经被加载。
- 页面中的元素样式已经被加载不会在被覆盖。
在大多数情况下，你的元素都是从 opacity: 0 开始，以使它们可以制作淡入的效果。但是由于 JavaScript 在页面开始渲染时才被加载，用户可能会看到元素闪烁的情况发生。解决这个问题的方法是在中设置 reveal 元素的可见性为隐藏状态。
scrollreveal 可调用方法
js
/**
* 删除目标元素的样式和事件监听
* target可接受值:
* css选择器
* 单个dom节点
* dom节点集合
* dom节点数组
*/
const target = '.items'
ScrollReveal().clean(target)
js
/**
* 初始化(添加样式和事件监听)
* target可接受值:
* css选择器
* 单个dom节点
* dom节点集合
* dom节点数组
*/
const target = '.items'
// options参考: scrollreveal 可配置属性
const options = {...}
ScrollReveal().reveal(target,options)
js
// 删除所有样式，事件以及销毁ScrollReveal的store（一般情况下不需要调用该方法）
ScrollReveal().destroy()
scrollreveal 可配置属性
| 属性/方法 | 类型 | 示例值 | 说明 |
| --------- | :-----: | -------------------: | ----------------------------------------------------------------------------------------------------- |
| container | DOM/css 选择器 | window.document.documentElement | `html`是默认容器。值类型支持两种，一种是 DOM 对象，一种是 css 选择器 |
| duration | number | 600 | 持续时间.单位为 ms |
| reset | boolean | true | 元素离开视口后返回初始位置, 等待下一次触发, 值为 false 时动画只触发一次 |
| origin | string | 'bottom' | 指定动画方向。可选值 top,right,bottom,left |
| delay | number | 500 | 动画开始前的延迟时间, 触发的动画 reset 永远不会使用延迟。 |
| distance | string | '-50px' | 控制元素在显示时移动的距离。接受的单位 px,em,% |
| easing | string | 'ease-in-out' | 控制动画速度。可选值:ease ease-in ease-in-out ease-out step-start step-end steps() cubic-bezier() |
| opacity | number | 0.5 | 初始透明度 |
| rotate | object | { x: 0, y: 0, z: 0 } | 指定开始的旋转角度 |
| scale | number | 0.8 | 指定在显示之前元素的大小。 |
| mobile | boolean | true | 是否在移动端执行 |
| beforeReveal | function | (ele)=>console.log(ele) | 执行之前的回调函数 |
| afterReveal | function | (ele)=>console.log(ele) | 执行之后的回调函数 |
| viewOffset | object | { top: 0, right: 0, bottom: 0, left: 0 } | 增加viewport或容器边界，单位像素. `{ top: 48 }`, if you have a 48px tall fixed toolbar. |
| viewFactor | number | 0.20 | 0.20表示元素在产生动画之前，它的20%在viewport或容器的边界之内 |
scrollreveal 使用示例
上面示例实现原理
当指定元素进入视口区域时，通过动画的方式让其显示，如下代码是通过交叉观察器，来得知指定元素是否已经进入可视区域
相关文章
超好用的 API 之 IntersectionObserver
基于 vue，如何实现滚动条滚动到指定位置，对应位置数字进行 tween 特效
Tween.js 安装
用 JS 创建补间动画
pnpm add @tweenjs/tween.js
Tween.js 用法实例
tween.js 实现数字过渡
从startNum过渡到endNum
参考资料
Anime.js 安装
实现各种物理特效
pnpm add @types/animejs -D
pnpm add animejs
Anime.js 使用示例
tween.js 实现数字过渡
从startNum过渡到endNum