优化动画, 增加2种内置动画

pull/1/head 1.8.4
yutent 2023-04-04 14:46:50 +08:00
parent 0ee7ddc6a1
commit 7ee22886cb
3 changed files with 12 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@bd/core", "name": "@bd/core",
"version": "1.8.3", "version": "1.8.4",
"type": "module", "type": "module",
"description": "百搭UI组件库的核心", "description": "百搭UI组件库的核心",
"main": "dist/index.js", "main": "dist/index.js",

View File

@ -29,9 +29,18 @@ export function animate(duration = 200, fromto = [], out = false) {
export const MODES = { export const MODES = {
fade: [{ opacity: 0 }, { opacity: 1 }], fade: [{ opacity: 0 }, { opacity: 1 }],
scale: [{ transform: 'scale(0)' }, { transform: 'scale(1)' }], scale: [{ transform: 'scale(0)' }, { transform: 'scale(1)' }],
'micro-bounce': [
{ opacity: 0, transform: 'scale(0.8)' },
{ transform: 'scale(1.05)', opacity: 1 },
{ transform: 'scale(1)' }
],
slide: [
{ opacity: 0, transform: 'translateY(-50px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
bounce: [ bounce: [
{ transform: 'scale(0)' }, { transform: 'scale(0)' },
{ transform: 'scale(1.25)' }, { transform: 'scale(1.2)' },
{ transform: 'scale(1)' } { transform: 'scale(1)' }
], ],
rotate: [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }] rotate: [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }]

View File

@ -625,7 +625,7 @@ class AnimPart extends AttributePart {
} }
commitValue({ type = 'fade', duration, custom } = {}) { commitValue({ type = 'fade', duration, custom } = {}) {
let fromto = MODES[type] let fromto = MODES[type] || MODES.fade
if (custom) { if (custom) {
fromto = custom fromto = custom