Odoo 14前端框架OWL之动画

Odoo Alan 3年前 (2020-10-27) 4885次浏览 3个评论 扫描二维码

完整目录请见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表达式的值必须是单个值(即不允许有空格)。

喜欢 (7)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 效果呢?
    sameng2022-01-18 10:58 回复
  2. 请问state.flag是什么
    风趣又端庄2021-12-23 10:15 回复
    • Alan
      示意用于逻辑判断
      Alan2021-12-24 08:07 回复