状态过渡Vue的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：数字和运算颜色的显示SVG节点的位置元素的大小和其他的属性所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合Vue的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。状态动画与侦听器通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用GreenSock一个例子：当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如CSS中的color的值，通过下面的例子我们来通过Tween.js和Color.js实现一个例子：动态状态过渡就像Vue的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的SVG多边形也可实现很多难以想象的效果。上述demo背后的代码可以通过这个fiddle进行详阅。把过渡放到组件里管理太多的状态过渡会很快的增加Vue实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下：我们能在组件中结合使用这一节讲到各种过渡策略和Vue内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。赋予设计以生命只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo和吉祥物的时候，他们交付的通常都是图片或静态的SVG。所以，虽然GitHub的章鱼猫、Twitter的小鸟以及其它许多logo类似于生灵，它们看上去实际上并不是活着的。Vue可以帮到你。因为SVG的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后Vue就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。
转载请注明：http://www.aierlanlan.com/rzdk/8250.html
