32、Aurelia 动画实现指南

Aurelia 动画实现指南

1. JavaScript 动画

1.1 JavaScript 动画功能

JavaScript 动画在传统 Web 应用中几乎可以实现任何类型的动画，涵盖元素的各种变换或移动。当需要停止、减慢或反转动画时，JavaScript 也非常有用。以下是一些示例：
- 点击时会弹跳的元素
- 响应事件而摆动的 <div> （例如聊天窗口摆动以提醒收到新消息）
- 左右摆动的元素

任何使用 CSS 过渡能实现的动画，JavaScript 动画也可以实现。不过，目前使用纯 JavaScript 创建有趣的动画需要大量的样板代码，不像调用 element.wiggle 那样简单。因此，更常见的做法是使用开源动画库，如 Velocity 或 GreenSock。这些库创建了简单的动画 API，允许使用更简洁直观的语法为页面的部分元素添加动画。例如，使用 Velocity 创建一个摇晃的元素，代码如下：

this.element.velocity("callout.shake");

1.2 JavaScript 动画优缺点

优点	缺点
- 几乎可以实现任何想象中的动画 - 根据所使用的动画库，对旧浏览器（如 IE8）有很好的支持