动画¶

Odoo 使用引人注目的动画，让您的网站变得栩栩如生。默认情况下，我们可以使用三种动画：

外观动画
滚动动画
悬停时的动画

论外观¶

在标准情况下，借助网站生成器，您可以在列、文本和图像元素出现时为其添加动画。 Odoo 会检测您的元素何时位于视口中并启动动画。有大量动画可供选择：

淡入
弹入
旋转入
放大
……

您可以轻松地在自定义主题中的列上定义动画。您需要添加两个类：o_animate 和 o_anim_fade_in。第二类根据您要使用的动画类型而变化。

添加 o_animate_both_scroll 类以在每次该列出现在屏幕上时启动动画。默认情况下，动画仅启动一次。

您还应该直接在 style 属性中定义 animation-duration 和 animation-delay 。

此外，您还可以添加动画方向。例如，要从屏幕底部为元素设置动画，请添加 o_anim_from_bottom 类并在 style 属性中设置 --wanim-intensity 来控制动画的方向强度。

使用

<div
   class="col-lg-6 o_animate o_anim_from_right o_anim_slide_in"
   style="--wanim-intensity: 50; animation-duration: 1s; animation-delay: 0;">
   <h2>A Section Subtitle</h2>
   <p>Write one or two paragraphs describing your product or services.</p>
</div>

滚动时¶

与我们上面看到的方式相同，只要视口滚动动画元素，您就可以向列、文本和图像元素添加滚动动画。

我们可以在滚动效果上添加6种动画：

褪色
滑动
弹跳
旋转
缩小
放大

此外，我们还可以设置 in 或 out 效果、动画 direction 、动画 intensity 和 scroll zone 。

使用

<div
   class="col-lg-6 o_animate o_animate_on_scroll o_animate_out o_anim_fade_in o_anim_from_right"
   data-scroll-zone-start="50"
   data-scroll-zone-end="100"
   style="--wanim-intensity: 100;">
   <h2>A Section Subtitle</h2>
   <p>Write one or two paragraphs describing your product or services.</p>
</div>

选项	数据属性	值类型
强度	`--wanim-intensity`	整数（在 CSS 中）
滚动区域开始	`data-scroll-zone-start`	整数
滚动区域结束	`data-scroll-zone-end`	整数

其他资料

Website Animate

悬停时¶

第三种动画仅与图像相关，并且每次我们将鼠标悬停在动画图像上时都会触发。

我们可以从 6 种动画中进行选择来应用悬停效果：

覆盖
放大
缩小
移动变焦
大纲
镜面模糊

使用

通过在图像标签上添加 o_animate_on_hover 类来启用悬停动画。在 data-hover-effect 属性中定义动画类型。

注解

Odoo 处理图像并创建包含图像和动画的最终 SVG 文件。默认情况下，它还应用常规图像形状。然后，最终图像作为附件存储在数据库中，以便将来可编辑。

<img
   src="..."
   alt="..."
   class="img img-fluid o_we_custom_image o_animate_on_hover"
   data-hover-effect="overlay"
   data-hover-effect-color="rgba(0, 0, 0, 0.25)"
   data-shape="html_editor/geometric/geo_square"
   data-shape-colors=";;;;"
   data-filename="my-image.svg"
   data-format-mimetype="image/webp" />

选项	数据属性	值类型
动画片	`data-hover-effect`	细绳
强度	`data-hover-effect-intensity`	整数
覆盖/描边颜色	`data-hover-effect-color`	十六进制或 RGBA 值
笔画宽度	`data-hover-stroke-width`	整数（保存为 `px`）
形状	`data-shape`	形状的路径
形状的颜色	`data-shape-colors`	形状中可用颜色的十六进制代码（最多 5 个）（每个值，即使为空，也用分号分隔，并引用形状文件中使用的调色板索引）

重要

此时，您可以在模块中插入带有悬停动画的图像，但该效果不会在模块安装后立即应用。由于建站神器需要先处理图像（对其进行转换，然后将其存储为附件），因此只有在您重新选择效果并使用建站神器保存页面后，悬停动画才会可见。

其他资料