feat(App): AnimationElement

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -14290,8 +14290,31 @@
   function getContextInfo(el) {
     return el.__uniContextInfo;
   }
+  class AnimationElement extends UniElement {
+    constructor(id2, element, parentNodeId, refNodeId, nodeJson, propNames = []) {
+      super(id2, element, parentNodeId, refNodeId, nodeJson, [
+        ...animation.props,
+        ...propNames
+      ]);
+    }
+    call(fn) {
+      const context = {
+        animation: this.$props.animation,
+        $el: this.$
+      };
+      fn.call(context);
+    }
+    init(nodeJson) {
+      super.init(nodeJson);
+      const item = animation.watch.animation;
+      watch(() => this.$props.animation, () => {
+        this.call(item.handler);
+      }, { deep: item.deep });
+      this.call(animation.mounted);
+    }
+  }
   const PROP_NAMES_HOVER$1 = ["space", "decode"];
-  class UniTextElement extends UniElement {
+  class UniTextElement extends AnimationElement {
     constructor(id2, parentNodeId, refNodeId, nodeJson) {
       super(id2, document.createElement("uni-text"), parentNodeId, refNodeId, nodeJson, PROP_NAMES_HOVER$1);
       this._text = "";
@@ -14328,7 +14351,7 @@
     "hover-start-time",
     "hover-stay-time"
   ];
-  class UniHoverElement extends UniElement {
+  class UniHoverElement extends AnimationElement {
     constructor(id2, element, parentNodeId, refNodeId, nodeJson, propNames = []) {
       super(id2, element, parentNodeId, refNodeId, nodeJson, [
         ...PROP_NAMES_HOVER,

packages/uni-app-plus/src/view/framework/dom/elements/AnimationElement.ts

+import { watch } from 'vue'
+import { UniNodeJSON } from '@dcloudio/uni-shared'
+import { animation } from '@dcloudio/uni-components'
+import { UniElement } from './UniElement'
+
+interface AnimationProps {
+  animation: any
+}
+export class AnimationElement<T extends object> extends UniElement<
+  T & AnimationProps
+> {
+  constructor(
+    id: number,
+    element: Element,
+    parentNodeId: number,
+    refNodeId: number,
+    nodeJson: Partial<UniNodeJSON>,
+    propNames: string[] = []
+  ) {
+    super(id, element, parentNodeId, refNodeId, nodeJson, [
+      ...animation.props,
+      ...propNames,
+    ])
+  }
+  call(fn: () => void) {
+    const context = {
+      animation: this.$props.animation,
+      $el: this.$,
+    }
+    fn.call(context)
+  }
+  init(nodeJson: Partial<UniNodeJSON>) {
+    super.init(nodeJson)
+    const item = animation.watch.animation
+    watch(
+      () => this.$props.animation,
+      () => {
+        this.call(item.handler)
+      },
+      { deep: item.deep }
+    )
+    this.call(animation.mounted)
+  }
+}

packages/uni-app-plus/src/view/framework/dom/elements/UniHoverElement.ts

 import { formatLog, UniNodeJSON } from '@dcloudio/uni-shared'
-import { UniElement } from './UniElement'
+import { AnimationElement } from './AnimationElement'
 
 interface HoverProps {
   'hover-class': string | 'none'
@@ -13,7 +13,7 @@ const PROP_NAMES_HOVER = [
   'hover-start-time',
   'hover-stay-time',
 ]
-export class UniHoverElement extends UniElement<HoverProps> {
+export class UniHoverElement extends AnimationElement<HoverProps> {
   private _hover?: Hover
   constructor(
     id: number,

packages/uni-app-plus/src/view/framework/dom/elements/UniTextElement.ts

 import '@dcloudio/uni-components/style/text.css'
 import { DecodeOptions, parseText } from '@dcloudio/uni-components'
-import { UniElement } from './UniElement'
+import { AnimationElement } from './AnimationElement'
 import { UniNodeJSON } from '@dcloudio/uni-shared'
 
 interface TextProps {
@@ -10,7 +10,7 @@ interface TextProps {
 
 const PROP_NAMES_HOVER = ['space', 'decode']
 
-export class UniTextElement extends UniElement<TextProps> {
+export class UniTextElement extends AnimationElement<TextProps> {
   private _text: string = ''
 
   constructor(

packages/uni-components/src/index.ts

@@ -26,3 +26,4 @@ export { uniFormKey } from './components/form'
 export type { UniFormCtx } from './components/form'
 export type { DecodeOptions } from './helpers/text'
 export { useRebuild } from './helpers/useRebuild'
+export { default as animation } from './helpers/animation'