vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：
所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
通过 watcher 我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用tweenjs一个例子：
<script class="lazy" data-original="https://unpkg.com/tween.js@16.3.4"></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatednumber }}</p>
</div>new vue({
el: '#animated-number-demo',
data: {
number: 0,
animatednumber: 0
},
watch: {
number: function(newvalue, oldvalue) {
var vm = this
function animate (time) {
requestanimationframe(animate)
tween.update(time)
}
new tween.tween({ tweeningnumber: oldvalue })
.easing(tween.easing.quadratic.out)
.to({ tweeningnumber: newvalue }, 500)
.onupdate(function () {
vm.animatednumber = this.tweeningnumber.tofixed(0)
})
.start()
animate()
}
}
})0
当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 css 中的 color 的值，通过下面的例子我们来通过 color.js 实现一个例子：
<script class="lazy" data-original="https://unpkg.com/tween.js@16.3.4"></script>
<script class="lazy" data-original="https://unpkg.com/color-js@1.0.3/color.js"></script>
<div id="example-7">
<input
v-model="colorquery"
v-on:keyup.enter="updatecolor"
placeholder="enter a color"
>
<button v-on:click="updatecolor">update</button>
<p>preview:</p>
<span
v-bind:style="{ backgroundcolor: tweenedcsscolor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedcsscolor }}</p>
</div>var color = net.brehaut.color
new vue({
el: '#example-7',
data: {
colorquery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedcolor: {}
},
created: function () {
this.tweenedcolor = object.assign({}, this.color)
},
watch: {
color: function () {
function animate (time) {
requestanimationframe(animate)
tween.update(time)
}
new tween.tween(this.tweenedcolor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedcsscolor: function () {
return new color({
red: this.tweenedcolor.red,
green: this.tweenedcolor.green,
blue: this.tweenedcolor.blue,
alpha: this.tweenedcolor.alpha
}).tocss()
}
},
methods: {
updatecolor: function () {
this.color = new color(this.colorquery).torgb()
this.colorquery = ''
}
}
}).example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}preview:
#000000
就像 vue 的过渡组件一样，数据背后状态转换会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 svg 多边形也可是实现很多难以想象的效果。
查看该 fiddle，了解上面演示的完整代码。
管理太多的状态转换的很快会接近到 vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下：
<script class="lazy" data-original="https://unpkg.com/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstnumber" type="number" step="20"> +
<input v-model.number="secondnumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstnumber"></animated-integer> +
<animated-integer v-bind:value="secondnumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// strategies.
vue.component('animated-integer', {
template: '<span>{{ tweeningvalue }}</span>',
props: {
value: {
type: number,
required: true
}
},
data: function () {
return {
tweeningvalue: 0
}
},
watch: {
value: function (newvalue, oldvalue) {
this.tween(oldvalue, newvalue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startvalue, endvalue) {
var vm = this
function animate (time) {
requestanimationframe(animate)
tween.update(time)
}
new tween.tween({ tweeningvalue: startvalue })
.to({ tweeningvalue: endvalue }, 500)
.onupdate(function () {
vm.tweeningvalue = this.tweeningvalue.tofixed(0)
})
.start()
animate()
}
}
})
// all complexity has now been removed from the main vue instance!
new vue({
el: '#example-8',
data: {
firstnumber: 20,
secondnumber: 40
},
computed: {
result: function () {
return this.firstnumber + this.secondnumber
}
}
})20 + 40 = 60
我们能在组件中结合使用这一节讲到各种过渡策略和 vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。
