Animate

使用法

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

プロパティ

利用可能なアニメーションタイプ

出現

このアニメーションは、メニューが表示されるなどのポップオーバー/モーダルコンテンツ用です。アニメーションされた要素の高さと幅が0から元のサイズまでスケーリングされる様子を示します。

オプション

ローディング

このアニメーションは、バックグラウンドでアクティビティが発生していることを示すために使用されます。50%から完全な不透明度への無限ループのフェードです。このアニメーションにはオプションはなく、関連する操作が完了次第削除する必要があります。

スライドイン

このアニメーションは、サイドバーやスライディングメニュー用です。アニメーションされた要素の高さと幅が隠れた位置から通常の位置に移動する様子を示します。

オプション