js修改display_Vue.js从零开始——过渡 / 动画效果（2）

题图是2013年在 OSRAM 的顶层拍的远景，能看到慕尼黑的高楼大厦不算多，远近也就看到4栋，左上的富士通，右侧远处的奥林匹克公园的高塔还有宝马大厦，最远处的那一栋我不知道是哪里了——这是因为不在老城区，老城区的话所有的建筑是不能高于玛丽安广场的老教堂的，这也是为什么大部分欧洲城市的高楼大厦偏少的原因，都是类似的情况。

言归正传，Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

数字和运算
颜色的显示
SVG 节点的位置（我知道这个没有在 HTML 当中说明过，我本来是打算放在 CSS 部分后面的，不过 Web API 这个部分我自己也有点迷糊，所以先学了再分享会更好，考虑放在 Vue 这部分后面了）
元素的大小和其他属性

这些数据要么本身就以数值形式存储，要么可以转换为数值，有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

所以今天这个章节就是一起来看看元素的状态过渡效果。

1 状态动画

通过监听器我们能监听到任何数值类 DOM 属性的数值更新，这个可能听起来很抽象，所以让我们先来看看使用 GreenSock（另一个动画库）一个例子：

<!DOCTYPE html>

我们可以看到当数值更新时，就会触发动画。

这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值怎么办？通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子：

<!DOCTYPE html>

2 动态的状态过渡

就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这个特点对于原型设计十分有用；当我们修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。

官网提供了一个例子（这里还是要说明一下，官方代码使用的是 var，而我这里大量使用 let 而不是 const 是因为演示原因，事实上有不少比如 generatePoints 方法定义当中的两个变量，其实都应该是常量，以防意料之外的修改）：

<!DOCTYPE html>

3 用好组件进行过渡

管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，所以我们可以把动画放置在专用的子组件之内，这里我们来将之前数值变化的示例改写一下：

<!DOCTYPE html>

我们能在组件中结合使用这一节讲到各种过渡策略，和上一节提及的 Vue 内建过渡，总之，对于完成各种过渡动效几乎没有阻碍。

4 赋予设计以生命

这部分内容完全来自于官方手册：

只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。

Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。

Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变（小警告，完整代码很长，因为动画完全是由 svg 实现的，我这里仅仅是实现了本地化处理）：

<!DOCTYPE html>

话说我的美术细胞是少了点，svg 也就不是我能玩得转的类型，看到人家的样例真是羡慕嫉妒恨啊……