Vue学习笔记进阶篇之过渡状态详解

Vue学习笔记进阶篇之过渡状态详解

这两天学习了vue.js 感觉渡系统这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

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

数字和运算

颜色的显示

SVG 节点的位置

元素的大小和其他的属性

所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

状态动画和watcher

通过 watcher 我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 Tweenjs 一个例子。

Js代码中引入：

示例代码：

{{animateNumber}}

var app1 = new Vue({

el:'#app1',

data:{

number:0,

animateNumber:0

},

watch:{

number:function (newVal, oldVal) {

var vm = this

function animate() {

if (TWEEN.update()){

requestAnimationFrame(animauIyhamLXte)

}

}

new TWEEN.Tween({tweeningNumber:oldVal})

.easing(TWEEN.Easing.Quadratic.Out)

.to({tweeningNumber:newVal}, 500)

.onUpdate(function () {

vm.animateNumber = this.tweeningNumber.toFixed(0)

})

.onComplete(function () {

cancelAnimationFrame(animate)

})

.start()

animate()

}

}

})

运行结果：

当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 css 中的 color 的值，通过下面的例子我们来通过 Color.js 实现一个例子。

js需要添加以下引用：

示例代码：

Update

Preview:

{{tweenedCSSColor}}

var Color = net.brehaut.Color

new Vue({

el:'#app-color',

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() {

if (TWEEN.update()){

requestAnimationFrame(animate)

}

}

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 = ''

}

}

})

运行结果：

通过组件组织过渡

管理太多的状态转换会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。

我们来将之前的示例改写一下：

+

=

{{result}}

+

=

Vue.component('animate-integer',{

template:'{{tweeningValue}}',

props:{

value:{

type:Number,

required:true

}

},

data:function () {

return {tweeningValue:0}

},

mounted:function () {

this.tween(0, this.value)

},

watch:{

value:function (newVal, oldVal) {

this.tween(oldVal, newVal)

}

},

methods:{

tween:function (startValue, endValue) {

var vm = this

function animate() {

if(TWEEN.update()){

requestAnimationFrame(animate)

}

}

new TWEEN.Tween({tweeningValue:startValue})

.to({tweeningValue:endValue}, 500)

.onUpdate(function () {

vm.tweeningValue = this.tweeningValue.toFixed(0)

}).start()

animate()

}

}

})

new Vue({

el:'#app',

data:{

firstNumber:20,

secondNumber:40

},

computed:{

result:function () {

return this.firstNumber + this.secondNumber

}

}

})

运行结果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。