l-1

WordPress笔记

主页/WordPress笔记/Animations for Blocks | WordPress动画特效插件（AOS.js）

WordPress插件推荐

Animations for Blocks | WordPress动画特效插件（AOS.js）

Animations for Blocks

AnimationsforBlocksWordPress动画特效插件（AOSjs）

介绍

轻量级插件，为块编辑块增加了额外的检查器控件，允许在滚动时块被用户看到时进行动画化。作可选择动画类型（淡入淡出、翻转、滑动、缩放）、变化（不同方向）、延迟、时长和更高级的设置。更改选项后，动画可以立即在编辑器中预览。

演示

该插件使用 AOS – Animate on scroll 库，并在前端添加了样式表（2.8 kB）和脚本（5.2 kB），以及一个初始化动画的脚本（1.3 kB）。

安装

通过管理仪表盘安装

  1. 进入你的WordPress管理仪表盘——>插件。
  2. 点击“添加新建”。
  3. 点击“上传插件”。
  4. 选择文件。animations-for-blocks.zip
  5. 点击“立即安装”。
  6. 在WordPress管理仪表盘激活插件 ->插件。

通过FTP上传手动安装

  1. 将文件夹“animations-for-blocks”从文件上传到你的WordPress安装文件夹。animations-for-blocks.zip../wp-content/plugins
  2. 在WordPress管理仪表盘激活插件 ->插件。

常见问题

我该如何添加动画？

在你所选方块的检查器控件（方块设置）中，打开“动画”面板，选择一个动画。当前模块应显示所选动画的预览，相关选项将在下方提供。它是如何运作的？

Animations for Blocks 插件通过使用 Animate on Scroll（AOS）库来工作，该库主要基于 CSS，并使用一些 JavaScript 来处理初始化。插件会在块根元素上添加属性，告诉 AOS 库如何对它进行动画。加载必要的样式和脚本也由插件自动处理。动画对我来说没有播放

默认情况下，插件不会为启用“偏好减少动作”设置的用户播放动画。这个功能可以通过启用“忽略减少动作偏好”插件选项来关闭，但这并不推荐。其他未启用减少动作偏好的用户仍能看到动画。动画会导致水平滚动条

由于部分元素最初放置在屏幕外，随后动画恢复正常位置，因此会出现滚动条。为防止这种情况，溢出应隐藏在父元件之一。你应该针对哪个元素，取决于你的网站。例如，你可以尝试添加自定义CSS：，但你必须确保这不会影响网站中需要溢出可见的其他功能。.wp-site-blocks { overflow: hidden; }它适用于所有方块吗？

它应该适用于渲染有效 WP 元素且能利用过滤器的普通块，以及使用该滤波器的动态块。第三方阻挡如果做了非常规的事情，可能就无法奏效。
已知的无支持块blocks.getSaveContent.extraPropsrender_callback禁用块支持

该过滤器可以在子主题的文件中使用，以禁用方块动画支持。anfb_unsupported_blocksfunctions.php

add_filter('anfb_unsupported_blocks', function($blocks) {
    $blocks[] = 'core/button';
    return $blocks;
});

禁用这个插件会发生什么？

禁用该插件后，带有动画的方块可能会失效。然后你可以点击“尝试方块恢复”来尝试恢复方块，这样可以移除自定义动画属性。如果你不想冒方块失效的风险，你需要在禁用插件前禁用所有动画。所有动画元素在前端都是隐形的

当你的网站上没有任何动画元素时，可能是因为JavaScript错误导致AOS无法初始化。请打开开发者工具（Chrome/Firefox 的 F12），查看控制台标签页中的任何错误。你可以联系客服，提示错误信息，如果可能的话附上你的网站链接。