[wordpress插件] Animated Blocks动画块

Add scroll-based CSS3 animations to Gutenberg blocks.

向Gutenberg块添加基于滚动的CSS3动画。

See how it works: video demo

查看其工作原理：视频演示

Features

功能

• Choose from 76 cross-browser CSS3 animations or add your own
• 从76种跨浏览器的CSS3动画中选择或添加自己的

• Preview animations in the editor
• 在编辑器中预览动画

• Adjust the animation delay, scroll threshold, and visibility of blocks
• 调整动画延迟，滚动阈值和块的可见性

• Based on Gutenberg’s InnerBlocks component
• 基于古腾堡的InnerBlocks组件

Settings

设置

• Delay: How many milliseconds to wait before animating the element.
• 延迟：为元素设置动画之前要等待几毫秒。

• Threshold: Add animation when x% of the element enters the screen.
• 阈值：当元素的x％进入屏幕时添加动画。

• Hide First: Set the element to opacity 0 when the page loads.

• 先隐藏：加载页面时，将元素设置为不透明度0。

  The option works for elements transitioning to 100% opacity through CSS.

该选项适用于通过CSS转换为100％不透明度的元素。

• Class name “ab-end” is automatically added to elements when a CSS animation has completed.

• 完成CSS动画后，类名称“ ab-end”会自动添加到元素中。

  This can be used for extra customization.

这可以用于额外的自定义。

Requirements

要求

PHP 5.6+ is recommended, WordPress 5.0+, and Gutenberg must be active.

建议使用PHP 5.6 +，WordPress 5.0+，并且必须启用Gutenberg。

Documentation

文档

Select Animated Block from the Layout Elements group and add any content blocks within it.

从“布局元素”组中选择“动画块”，然后在其中添加任何内容块。

Select an animation from the dropdown list or add your own custom CSS class.

从下拉列表中选择动画，或添加自己的自定义CSS类。

The selected animation or custom CSS class will be added to the block when the user scrolls to it.

当用户滚动到选定的动画或自定义CSS类时，会将其添加到块中。

Animated Block is a parent block (a container), nesting as many blocks as you want.

Animated Block是一个父块（一个容器），可以根据需要嵌套任意数量的块。