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

前端之家收集整理的这篇文章主要介绍了Vue学习笔记进阶篇之过渡状态详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  1. 数字和运算
  2. 颜色的显示
  3. SVG 节点的位置
  4. 元素的大小和其他的属性

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

状态动画和watcher

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

Js代码中引入:

示例代码

{{animateNumber}}

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需要添加以下引用:

猜你在找的Vue相关文章