説明
The core Tabs block (WordPress 7.1+) shows and hides its core/tab-panel
content by toggling the hidden attribute via the Interactivity API, which
reveals it abruptly. This plugin adds a small animation to that reveal and a
Settings Tabs Animation screen to control it, with no theme changes
required.
Features:
- Five animation types: Fade, Slide right, Slide left, Slide up, Slide down.
- Adjustable duration (0–3000ms) and easing (ease, ease-in, ease-out,
ease-in-out, linear). - Respects the visitor’s reduced-motion preference.
- A single small inline stylesheet – no build step, no JavaScript.
スクリーンショット
インストール
- Upload the plugin to
/wp-content/plugins/elliott-richmond-tabs-animation. - Activate through the ‘Plugins’ screen in WordPress.
- Visit Settings Tabs Animation to choose an effect, duration, and easing.
FAQ
-
Does this work with any theme?
-
Yes. The animation targets the core Tabs block’s own markup
(.wp-block-tab-panel), not anything theme-specific, so it works with any
block theme or classic theme that supports the core Tabs block. -
Can different Tabs blocks on the same site use different animations?
-
Not currently — one setting applies site-wide to every Tabs block.
-
Does it affect page load performance?
-
No extra HTTP request: the animation CSS is added as a small inline
stylesheet, and there’s no JavaScript. -
What if a visitor has reduced motion enabled?
-
The animation is disabled automatically for visitors whose OS/browser
requestsprefers-reduced-motion: reduce; panels appear instantly instead.
評価
このプラグインにはレビューがありません。
貢献者と開発者
“Elliott Richmond Tabs Animation” をあなたの言語に翻訳しましょう。
開発に興味がありますか ?
変更履歴
0.1.0
- Initial release.
0.2.0
- Updated assets.
- Included screenshot.