feat: 进入视图才执行动画

packages/amis-core/src/SchemaRenderer.tsx

@@ -39,9 +39,7 @@ import {buildStyle} from './utils/style';
 import {isExpression} from './utils/formula';
 import {StatusScopedProps} from './StatusScoped';
 import {evalExpression, filter} from './utils/tpl';
-import {CSSTransition} from 'react-transition-group';
-import {createAnimationStyle} from './utils/animations';
-import styleManager from './StyleManager';
+import Animations from './components/Animations';
 
 interface SchemaRendererProps
   extends Partial<Omit<RendererProps, 'statusStore'>>,
@@ -103,49 +101,19 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
   schema: any;
   path: string;
 
-  animationTimeout: {
-    enter?: number;
-    exit?: number;
-  } = {};
-  animationClassNames: {
-    appear?: string;
-    enter?: string;
-    exit?: string;
-  } = {};
-
   toDispose: Array<() => any> = [];
   unbindEvent: (() => void) | undefined = undefined;
   unbindGlobalEvent: (() => void) | undefined = undefined;
   isStatic: any = undefined;
 
   constructor(props: SchemaRendererProps) {
     super(props);
-    const animations = props?.schema?.animations;
-    if (animations) {
-      let id = props?.schema.id;
-      id = formateId(id);
-      if (animations.enter) {
-        this.animationTimeout.enter =
-          ((animations.enter.duration || 1) + (animations.enter.delay || 0)) *
-          1000;
-        this.animationClassNames.enter = `${animations.enter.type}-${id}-enter`;
-        this.animationClassNames.appear = this.animationClassNames.enter;
-      }
-      if (animations.exit) {
-        this.animationTimeout.exit =
-          ((animations.exit.duration || 1) + (animations.exit.delay || 0)) *
-          1000;
-        this.animationClassNames.exit = `${animations.exit.type}-${id}-exit`;
-      }
-    }
 
     this.refFn = this.refFn.bind(this);
     this.renderChild = this.renderChild.bind(this);
     this.reRender = this.reRender.bind(this);
     this.resolveRenderer(this.props);
     this.dispatchEvent = this.dispatchEvent.bind(this);
-    this.addAnimationAttention = this.addAnimationAttention.bind(this);
-    this.removeAnimationAttention = this.removeAnimationAttention.bind(this);
 
     // 监听statusStore更新
     this.toDispose.push(
@@ -169,20 +137,11 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     );
   }
 
-  componentDidMount(): void {
-    if (this.props.schema.animations) {
-      let {animations, id} = this.props.schema;
-      id = formateId(id);
-      createAnimationStyle(id, animations);
-    }
-  }
-
   componentWillUnmount() {
     this.toDispose.forEach(fn => fn());
     this.toDispose = [];
     this.unbindEvent?.();
     this.unbindGlobalEvent?.();
-    this.removeAnimationStyle();
   }
 
   // 限制：只有 schema 除外的 props 变化，或者 schema 里面的某个成员值发生变化才更新。
@@ -213,14 +172,6 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     return false;
   }
 
-  removeAnimationStyle() {
-    if (this.props.schema.animations) {
-      let {id} = this.props.schema;
-      id = formateId(id);
-      styleManager.removeStyles(id);
-    }
-  }
-
   resolveRenderer(props: SchemaRendererProps, force = false): any {
     let schema = props.schema;
     let path = props.$path;
@@ -367,25 +318,6 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     this.forceUpdate();
   }
 
-  addAnimationAttention(node: HTMLElement) {
-    const {schema} = this.props || {};
-    const {attention} = schema?.animations || {};
-    if (attention) {
-      let {id} = schema;
-      id = formateId(id);
-      node.classList.add(`${attention.type}-${id}-attention`);
-    }
-  }
-  removeAnimationAttention(node: HTMLElement) {
-    const {schema} = this.props || {};
-    const {attention} = schema?.animations || {};
-    if (attention) {
-      let {id} = schema;
-      id = formateId(id);
-      node.classList.remove(`${attention.type}-${id}-attention`);
-    }
-  }
-
   render(): JSX.Element | null {
     let {
       $path: _,
@@ -536,7 +468,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     } = schema;
     const Component = renderer.component!;
 
-    let animationIn = true;
+    let animationShow = true;
 
     // 原来表单项的 visible: false 和 hidden: true 表单项的值和验证是有效的
     // 而 visibleOn 和 hiddenOn 是无效的，
@@ -550,7 +482,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         (schema.visible !== false && !schema.hidden))
     ) {
       if (schema.animations) {
-        animationIn = false;
+        animationShow = false;
       } else {
         return null;
       }
@@ -629,17 +561,11 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
 
     if (schema.animations) {
       component = (
-        <CSSTransition
-          in={animationIn}
-          timeout={this.animationTimeout}
-          classNames={this.animationClassNames}
-          onEntered={this.addAnimationAttention}
-          onExit={this.removeAnimationAttention}
-          appear
-          unmountOnExit
-        >
-          {component}
-        </CSSTransition>
+        <Animations
+          schema={schema}
+          component={component}
+          show={animationShow}
+        />
       );
     }
 

packages/amis-core/src/components/Animations.tsx

@@ -0,0 +1,150 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {CSSTransition} from 'react-transition-group';
+import {Schema} from '../types';
+import {formateId} from '../utils';
+import {createAnimationStyle} from '../utils/animations';
+import styleManager from '../StyleManager';
+
+function Animations({
+  schema,
+  component,
+  show
+}: {
+  schema: Schema;
+  component: any;
+  show: boolean;
+}) {
+  const idRef = useRef<string>(formateId(schema.id));
+  const id = idRef.current;
+  const {enter} = schema.animations || {};
+  const [animationShow, setAnimationShow] = React.useState(!enter?.inView);
+  const [placeholderShow, setPlaceholderShow] = React.useState(!!enter?.inView);
+
+  const [animationClassNames] = useState(() => {
+    const animations = schema?.animations;
+    const animationClassNames = {
+      appear: '',
+      enter: '',
+      exit: ''
+    };
+    if (animations) {
+      if (animations.enter) {
+        animationClassNames.enter = `${animations.enter.type}-${id}-enter`;
+        animationClassNames.appear = animationClassNames.enter;
+      }
+      if (animations.exit) {
+        animationClassNames.exit = `${animations.exit.type}-${id}-exit`;
+      }
+    }
+    return animationClassNames;
+  });
+  const [animationTimeout] = useState(() => {
+    const animations = schema?.animations;
+    const animationTimeout = {
+      enter: 1000,
+      exit: 1000
+    };
+    if (animations) {
+      if (animations.enter) {
+        animationTimeout.enter =
+          ((animations.enter.duration || 1) + (animations.enter.delay || 0)) *
+          1000;
+      }
+      if (animations.exit) {
+        animationTimeout.exit =
+          ((animations.exit.duration || 1) + (animations.exit.delay || 0)) *
+          1000;
+      }
+    }
+    return animationTimeout;
+  });
+
+  useEffect(() => {
+    createAnimationStyle(id, schema.animations!);
+    return () => {
+      if (schema.animations) {
+        styleManager.removeStyles(id);
+      }
+    };
+  }, []);
+
+  function refFn(ref: HTMLDivElement) {
+    if (ref) {
+      const observer = new IntersectionObserver(
+        ([entry], observer) => {
+          if (entry.isIntersecting) {
+            setAnimationShow(true);
+            setPlaceholderShow(false);
+            observer.disconnect();
+          }
+        },
+        {
+          root: null,
+          rootMargin: '0px',
+          threshold: 0.1
+        }
+      );
+      if (ref) {
+        observer.observe(ref);
+      }
+    }
+  }
+
+  function handleEntered(node: HTMLElement) {
+    const {attention, exit, enter} = schema.animations || {};
+    if (attention) {
+      node.classList.add(`${attention.type}-${id}-attention`);
+    }
+
+    if (exit?.outView || enter?.repeat) {
+      const observer = new IntersectionObserver(
+        ([entry], observer) => {
+          if (!entry.isIntersecting) {
+            setAnimationShow(false);
+            observer.disconnect();
+          }
+        },
+        {
+          root: null,
+          rootMargin: '0px',
+          threshold: 0.1
+        }
+      );
+      observer.observe(node);
+    }
+  }
+  function handleExit(node: HTMLElement) {
+    const {attention} = schema.animations || {};
+    if (attention) {
+      node.classList.remove(`${attention.type}-${id}-attention`);
+    }
+  }
+
+  function handleExited() {
+    setPlaceholderShow(true);
+  }
+
+  return (
+    <>
+      {!animationShow && show && placeholderShow && (
+        <div ref={refFn} className="amis-animation-placeholder">
+          {component}
+        </div>
+      )}
+      <CSSTransition
+        in={animationShow && show}
+        timeout={animationTimeout}
+        classNames={animationClassNames}
+        onEntered={handleEntered}
+        onExit={handleExit}
+        onExited={handleExited}
+        appear
+        unmountOnExit
+      >
+        {component}
+      </CSSTransition>
+    </>
+  );
+}
+
+export default Animations;

packages/amis-core/src/utils/animations.ts

@@ -5,6 +5,8 @@ export interface AnimationsProps {
     type: string;
     duration?: number;
     delay?: number;
+    repeat?: boolean;
+    inView?: boolean;
   };
   attention?: {
     type: string;
@@ -16,6 +18,8 @@ export interface AnimationsProps {
     type: string;
     duration?: number;
     delay?: number;
+    repeat?: boolean;
+    outView?: boolean;
   };
 }
 

packages/amis-core/src/utils/helper.ts

@@ -2437,6 +2437,9 @@ export function supportsMjs() {
 }
 
 export function formateId(id: string) {
+  if (!id) {
+    return guid();
+  }
   // 将className非法字符替换为短横线
   id = id.replace(/[^a-zA-Z0-9-]/g, '-');
   // 将连续的-替换为单个-

packages/amis-editor/src/tpl/style.tsx

@@ -1,4 +1,9 @@
-import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core';
+import {
+  setSchemaTpl,
+  getSchemaTpl,
+  defaultValue,
+  tipedLabel
+} from 'amis-editor-core';
 import {createAnimationStyle, formateId, type SchemaCollection} from 'amis';
 import kebabCase from 'lodash/kebabCase';
 import {styleManager} from 'amis-core';
@@ -1532,7 +1537,26 @@ setSchemaTpl('animation', () => {
   return {
     title: '动画',
     body: [
-      ...animation('enter', '进入动画'),
+      ...animation('enter', '进入动画', [
+        {
+          label: tipedLabel('可见时触发', '组件进入可见区域才触发进入动画'),
+          type: 'switch',
+          name: 'animations.enter.inView',
+          value: true,
+          onChange: (value: any, oldValue: any, obj: any, props: any) => {
+            if (value === false) {
+              props.setValueByName('animations.enter.repeat', false);
+            }
+          }
+        },
+        {
+          label: tipedLabel('重复', '组件再次进入可见区域时重复播放动画'),
+          type: 'switch',
+          name: 'animations.enter.repeat',
+          visibleOn: 'animations.enter.inView',
+          value: false
+        }
+      ]),
       ...animation('attention', '强调动画', [
         {
           label: '重复',
@@ -1548,7 +1572,14 @@ setSchemaTpl('animation', () => {
           ]
         }
       ]),
-      ...animation('exit', '退出动画')
+      ...animation('exit', '退出动画', [
+        {
+          label: tipedLabel('不可见时触发', '组件退出可见区域触发进入动画'),
+          type: 'switch',
+          name: 'animations.exit.outView',
+          value: true
+        }
+      ])
     ]
   };
 });