01. nvue 模式不支持 css 动画,使用 weex animation 模块来实现;
提供 weex.animation 示例,请理解原理并改进使用; 相关文档 : https://uniapp.dcloud.io/tutorial/nvue-api.html#animation
02. vue 环境下动画库基于 animate.css , 以样式形式提供了多种动画预设效果;
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ 利用 js api 实现 |
动画样式名称 | 效果 |
bounce | 回弹 |
flash | 闪烁 |
pulse | 脉冲 |
rubberBand | 橡皮筋 |
shake | 晃动 |
headShake | 摇头 |
swing | 摇摆 |
tada | 缩放加摇摆 |
wobble | 大幅度摇摆 |
jello | 果冻 |
heartBeat | 心跳 |
bounceIn | 跳动进入 |
bounceInDown | 向下飞入 |
bounceInLeft | 左侧飞入 |
bounceInRight | 右侧飞入 |
bounceInUp | 向上飞入 |
bounceOutDown | 向下飞出 |
bounceOutLeft | 左侧飞出 |
bounceOutRight | 右侧飞出 |
bounceOutUp | 向上飞出 |
fadeIn | 渐变进入 |
fadeInDown | 渐变向下进入 |
fadeInDownBig | 渐变向下进入大幅度 |
fadeInLeft | 渐变左侧进入 |
fadeInLeftBig | 渐变左侧进入大幅度 |
fadeInRight | 渐变右侧进入 |
fadeInRightBig | 渐变右侧进入大幅度 |
fadeInUp | 渐变向上进入 |
fadeInUpBig | 渐变向上进入大幅度 |
fadeOut | 渐变消失 |
fadeOutDown | 向下淡出 |
fadeOutDownBig | 向下淡出大幅度 |
fadeOutLeft | 左侧淡出 |
fadeOutLeftBig | 左侧淡出大幅度 |
fadeOutRight | 右侧淡出 |
fadeOutRightBig | 右侧淡出大幅度 |
fadeOutUp | 向上淡出 |
fadeOutUpBig | 向上淡出大幅度 |
flip | 快速翻转 |
flipInX | 水平翻转 |
flipInY | 垂直翻转 |
flipOutX | 水平翻转后消失 |
flipOutY | 垂直翻转后消失 |
lightSpeedIn | 光速侠进入 |
lightSpeedOut | 光速侠消失 |
rotateIn | 旋转进入 |
rotateInDownLeft | 旋转左下为轴 |
rotateInDownRight | 旋转右下为轴 |
rotateInUpLeft | 旋转左上为轴 |
rotateInUpRight | 旋转右上为轴 |
rotateOut | 旋转淡出 |
rotateOutDownLeft | 旋转左下为轴淡出 |
rotateOutDownRight | 旋转右下为轴淡出 |
rotateOutUpLeft | 旋转左上为轴淡出 |
rotateOutUpRight | 旋转右上为轴淡出 |
hinge | 合页 |
jackInTheBox | 动态盒子 |
rollIn | 滚动进入 |
rollOut | 滚动淡出 |
zoomIn | 缩放进入 |
zoomInDown | 向下缩放进入 |
zoomInLeft | 从左缩放进入 |
zoomInRight | 从右缩放进入 |
zoomInUp | 向上缩放进入 |
zoomOut | 缩放消失 |
zoomOutDown | 向下缩放消失 |
zoomOutLeft | 从左缩放消失 |
zoomOutRight | 从右缩放消失 |
zoomOutUp | 向上缩放消失 |
slideInLeft | 左侧滑入 |
slideInRight | 右侧滑入 |
slideInUp | 顶部滑入 |
slideOutDown | 底部滑出 |
slideOutLeft | 左侧滑出 |
slideOutRight | 右侧滑出 |
slideOutUp | 顶部滑出 |