云策 WordPress 开发者社区

块编辑器开发文档

Animate

查看官方原文 ↗
💡 云策文档标注

概述

Animate 组件为 WordPress 组件库提供动画功能，通过简单接口为元素添加动画效果。支持多种动画类型，如 appear、loading 和 slide-in，并可配置选项如 origin。

关键要点

  • Animate 组件用于包装其他组件，通过 type 和 options props 定义动画类型和参数。
  • children 是一个回调函数，接收 className 等 props 以应用到动画元素上。
  • 可用动画类型包括 appear（用于弹出内容）、loading（用于后台活动指示）和 slide-in（用于侧边栏）。

代码示例

import { Animate, Notice } from '@wordpress/components';

const MyAnimatedNotice = () => (
    <Animate type="slide-in" options={ { origin: 'top' } }>
        { ( { className } ) => (
            <Notice className={ className } status="success">
                <p>Animation finished.</p>
            </Notice>
        ) }
    </Animate>
);

注意事项

  • loading 动画无限循环，应在相关操作完成后移除。
  • appear 动画默认 origin 为 top center，slide-in 默认 origin 为 left。
📄 原文内容

Simple interface to introduce animations to components.

Usage

import { Animate, Notice } from '@wordpress/components';

const MyAnimatedNotice = () => (
    <Animate type="slide-in" options={ { origin: 'top' } }>
        { ( { className } ) => (
            <Notice className={ className } status="success">
                <p>Animation finished.</p>
            </Notice>
        ) }
    </Animate>
);

Props

Name Type Default Description
type string undefined Type of the animation to use.
options object {} Options of the chosen animation.
children function undefined A callback receiving a list of props ( className ) to apply to the DOM element to animate.

Available Animation Types

appear

This animation is meant for popover/modal content, such as menus appearing. It shows the height and width of the animated element scaling from 0 to full size, from its point of origin.

Options

Name Type Default Description
origin string top center Point of origin (top, bottom,middle right, left, center).

loading

This animation is meant to be used to indicate that activity is happening in the background. It is an infinitely-looping fade from 50% to full opacity. This animation has no options, and should be removed as soon as its relevant operation is completed.

slide-in

This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one.

Options

Name Type Default Description
origin string left Point of origin (left).