此组件已弃用。请改用您自己的 CSS 动画，最好使用 @wordpress/theme 中提供的 motion tokens。

用于向组件引入动画的简单接口。

用法

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>
);

属性

名称类型默认值描述
typestringundefined要使用的动画类型。
optionsobject{}所选动画的选项。
childrenfunctionundefined一个回调函数，接收一组要应用于要动画化的 DOM 元素的属性（className）。

可用的动画类型

appear

此动画旨在用于弹出框/模态内容，例如菜单的出现。它显示动画元素从其原点开始，高度和宽度从 0 缩放到全尺寸的过程。

选项

名称类型默认值描述
originstringtop center原点（top、bottom、middle right、left、center）。

loading

此动画旨在用于指示后台正在发生活动。它是一个无限循环的淡入淡出效果，透明度在 50% 到完全透明之间变化。此动画没有选项，应在相关操作完成后立即移除。

slide-in

此动画旨在用于侧边栏和滑动菜单。它显示动画元素从隐藏位置移动到其正常位置的高度和宽度过程。

选项

名称类型默认值描述
originstringleft原点（left）。