指南
基础概要
- 安装
- 介绍
- Vue 实例
- 模板语法
- computed 属性和 watcher
- class 和 style 绑定
- 根据条件进行渲染
- 列表渲染
- 事件处理
- 表单 input 绑定
- 组件基础
过渡 & 动画
- 进入、离开和列表的过渡
深入组件
- 组件注册
- props
- 自定义事件
- slot
- 动态组件和异步组件
- Handling Edge Cases
- 状态间的过渡
可重用 & 合成
- mixin
- 自定义指令
- render 函数 & jsx
- 插件
- 过滤器
工具
- 生产环境部署
- 单文件组件
- 单元测试
- TypeScript 支持
扩展升级
- 路由
- 状态管理
- 服务端渲染
内部原理
- 深入响应式原理
升级迁移
- 从 Vue 1.x 迁移
- 从 Vue Router 0.7.x 迁移
- 从 Vuex 0.6.x 迁移到 1.0
其他更多
- 对比其他框架
- 加入 Vue.js 社区
- 认识团队
状态间的过渡
Vue 的过渡系统提供了很多简便方法,可以在进入、离开时,以及对列表进行动画,但是对于数据变化的动画要如何处理呢?比如:
- 数字和计算
- 颜色显示
- SVG 节点的位置
- 元素大小和其他属性
所有以上这些要么是存储为原始数字,要么可以转化为数字。一旦我们实现这步,就可以结合 Vue 的响应式和组件系统,使用第三方库补充中间状态(tween state),以对这些状态变化进行动画。
使用 watcher 对状态进行动画(Animating State with Watchers)
watcher 可以观察到从任何数值属性到另一个属性的变化,然后进行动画。这一抽象听起来很复杂,所以让我们深入一个使用 GreenSock 的例子:
<script src="https://lib.baomitu.com/gsap/1.20.3/TweenMax.min.js"></script> |
new Vue({ |
{{ animatedNumber }}
当更新数值时,输入框下方就会对数值的更改进行动画。这是一个不错的 demo 示例,但是,对于不能直接存储为数字的值,比如有效的 CSS 颜色值?以下是我们如何通过 Tween.js 和 Color.js 来实现对非数值进行动画:
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script> |
var Color = net.brehaut.Color |
.example-7-color-preview { |
Preview:
{{ tweenedCSSColor }}
动态状态过渡(Dynamic State Transitions)
就像 Vue 的过渡组件那样,动态数据所支撑的状态的过渡也可以实时更新,这对于制作原型十分有用!即使是一个简单的 SVG 多边形,在操作一些变量之后,也可是实现很多难以想象的效果。
See this fiddle for the complete code behind the above demo.
通过组件组织过渡(Organizing Transitions into Components)
管理太多的状态过渡,会快速增加 Vue 实例或者组件的复杂性。幸运的是,许多动画可以提取到专用的子组件中。让我们用前面的整数动画来举例:
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script> |
// 在我们的应用程序中,所有的整数动画, |
在子组件中,我们可以使用本页面所涵盖的所有过渡策略进行组合,再通过 Vue 提供的内置过渡系统 。将这些结合在一起,对于要实现的动画效果的限制很少。
赋予设计以生命
通过定义动画,可以给我们的设计带来生命。不幸的是,当设计师创建图标、logo 和吉祥物的时候,他们通常交付的都是图片或静态 SVG。所以,虽然 GitHub 章鱼猫、Twitter 小鸟以及其它许多 logo 都类似于生灵,它们看上去缺乏生气。
Vue 可以提供帮助。由于 SVG 的本质是数据,我们只需要提供这些动物活跃、思考或惊恐状态下的图例。然后 Vue 通过使用这些图例,来实现这几种状态之间的过渡动画,以制作欢迎页面、加载指示、以及触发情感的提示信息。
Sarah Drasner 提供了如下示例,通过把时间和交互组合,来驱动状态改变:
See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.