动画¶

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`	整数

悬停时¶

这第三类动画仅与图像有关，每次我们将鼠标悬停在带有动画的图像上时都会触发。

我们可以从 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 个）（每个值即使为空也用分号分隔，并引用形状文件中使用的调色板索引）

重要

此时，你已经可以在模块中插入带悬停动画的图片，但模块安装后效果不会立即生效。由于网站构建器需要先处理图片（转换图片并将其存储为附件），只有重新选择效果并使用网站构建器保存页面后，悬停动画才会可见。