完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版
🦉 动画 🦉
动画是一个复杂的话题。有各种各样的不同用例、解决方案和技术。Owl仅支持一些基本使用场景。
简单的CSS特效
有时，使用纯CSS就足够了。不一定需要Owl：它只需使用一个特殊的class来渲染DOM元素即可。例如：
|
1 |
<a class="btn flash" t-on-click="doSomething">Click</a> |
使用如下的CSS：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
btn { background-color: gray; } .flash { transition: background 0.5s; } .flash:active { background-color: #41454a; transition: background 0s; } |
就将会在用户点击按钮（或使用键盘激活按钮）时生成一个美观的flash特效。
CSS平滑切换
更复杂的场景是在一个页面元素进入或离开页面时。例如，我们可能希望有淡入、淡出的效果。
t-transition可以帮助我们完成这一效果。它通过对html元素及组件添加或删除一些css类来实现功能。
要在元素出现或消失时形成一些有意义的切换效果，需要在节点的生命周期的一些时刻精准地添加或删除一些css样式或类。因为手动做会有些困难，所以Owl提供了 t-transition指令来完成这一任务。
在节点拥有t-transition指令时，会按顺序发生如下事件：
插入节点时：
- 在DOM中插入节点时会直接添加
name-enter和name-enter-active两个类， - 在下一个动画帧中：会删除掉
name-entercss类，并添加name-enter-to类（因而可以用于触发css切换特效）， - 在css切换结束时会删除掉
name-enter-active这一css类。
节点销毁时：
- 在删除节点前会对DOM添加
name-leave和name-leave-activecss类， - 在下一个动画帧中会删除掉
name-leavecss类（因而可以用于触发css切换特效）， - 在css切换结束时会删除
name-leave-active这一个类。仅当此时才会从DOM中移除该元素。
例如，简单的淡入淡出效果可以实现如下：
|
1 2 3 |
<div> <div t-if="state.flag" class="square" t-transition="fade">Hello</div> </div> |
|
1 2 3 4 5 6 7 8 |
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } |
t-transition 指令可用于节点元素或组件上。
注意：
Owl对单个节点不支持多种切换，因此t-transition表达式的值必须是单个值（即不允许有空格）。
