完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版

🦉 动画 🦉

动画是一个复杂的话题。有各种各样的不同用例、解决方案和技术。Owl仅支持一些基本使用场景。

简单的CSS特效

有时，使用纯CSS就足够了。不一定需要Owl：它只需使用一个特殊的class来渲染DOM元素即可。例如：

使用如下的CSS：

就将会在用户点击按钮（或使用键盘激活按钮）时生成一个美观的flash特效。

CSS平滑切换

更复杂的场景是在一个页面元素进入或离开页面时。例如，我们可能希望有淡入、淡出的效果。

t-transition可以帮助我们完成这一效果。它通过对html元素及组件添加或删除一些css类来实现功能。

要在元素出现或消失时形成一些有意义的切换效果，需要在节点的生命周期的一些时刻精准地添加或删除一些css样式或类。因为手动做会有些困难，所以Owl提供了 t-transition指令来完成这一任务。

在节点拥有t-transition指令时，会按顺序发生如下事件：

插入节点时：

• 在DOM中插入节点时会直接添加 name-enter 和 name-enter-active 两个类，
• 在下一个动画帧中：会删除掉 name-enter css类，并添加 name-enter-to 类（因而可以用于触发css切换特效），
• 在css切换结束时会删除掉name-enter-active 这一css类。

节点销毁时：

• 在删除节点前会对DOM添加 name-leave 和 name-leave-activecss类，
• 在下一个动画帧中会删除掉name-leave css类（因而可以用于触发css切换特效），
• 在css切换结束时会删除name-leave-active 这一个类。仅当此时才会从DOM中移除该元素。

例如，简单的淡入淡出效果可以实现如下：

t-transition 指令可用于节点元素或组件上。

注意：

Owl对单个节点不支持多种切换，因此t-transition表达式的值必须是单个值（即不允许有空格）。