tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web:compat animate API for x5

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-20 11:59:59 +08:00 committed by osborn
parent 03e3630d02
commit 11f004d974
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
doric-web/src/DoricContext.ts
View File

@ -20,7 +20,10 @@ export class DoricContext {
pluginInstances: Map<string, DoricPlugin> = new Map
rootNode: DoricStackNode
headNodes: Map<string, Map<string, DoricViewNode>> = new Map
animationSet?: { viewNode: DoricViewNode, keyFrame: Partial<CSSStyleDeclaration> }[]
animationSet?: {
viewNode: DoricViewNode,
keyFrame: Partial<CSSStyleDeclaration>,
}[]
constructor(content: string) {
createContext(this.contextId, content)
@ -93,7 +96,7 @@ export class DoricContext {
addAnimation(viewNode: DoricViewNode, keyFrame: Partial<CSSStyleDeclaration>) {
this.animationSet?.push({
viewNode,
keyFrame
keyFrame,
})
}

28
doric-web/src/plugins/AnimatePlugin.ts
View File

@ -24,15 +24,41 @@ export class AnimatePlugin extends DoricPlugin {
Promise.all(
this.context.animationSet?.map(e => {
return new Promise(resolve => {
const keyFrame: Keyframe = {}
const ensureNonString = (key: string, value: any) => {
if (!!value && value !== "") {
return value
}
switch ((key)) {
case "backgroundColor":
return "transparent"
case "transform":
return "none"
default:
return "none"
}
}
for (let k in e.keyFrame) {
keyFrame[k] = ensureNonString(k, e.viewNode.view.style[k])
e.keyFrame[k] = ensureNonString(k, e.keyFrame[k])
}
try {
const animation = e.viewNode.view.animate(
[e.keyFrame as Keyframe],
[keyFrame, e.keyFrame as Keyframe],
{
duration: args.duration,
fill: "forwards"
})
animation.onfinish = () => {
Object.entries(e.keyFrame).forEach(entry => {
Reflect.set(e.viewNode.view.style, entry[0], entry[1])
})
resolve(true)
}
} catch (e) {
console.error(e)
alert(e.stack)
}
})
}) || [])
.then(() => {