微信抽签小程序_Vue学习笔记进阶篇之过渡状态详解

Vue学习笔记进阶篇之过渡状态详解       本篇文章主要介绍了Vue学习笔记进阶篇之过渡状态详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

状态动画和watcher

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

Js代码中引入:

 script src="tween..4" /script 

示例代码:

 div id="app1" 
 input v-model.number="number" type="number" step="20" 
 p {{animateNumber}} /p 
 /div 

运行结果:

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

js需要添加以下引用:

 script src="tween..4" /script 
 script src="color-.3/color.js" /script 

示例代码:

 div id="app-color" 
 input v-model="colorQuery" @keyup.enter="updateColor" placeholder="Enter a color" 
 button @click="updateColor" Update /button 
 p Preview: /p 
 span : 
 /span 
 p {{tweenedCSSColor}} /p 
 /div 

运行结果:

通过组件组织过渡

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

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

 div id="app" 
 input v-model.number="firstNumber" type="number" step="20" +
 input v-model.number="secondNumber" type="number" step="20" =
 {{result}}
 animate-integer :value="firstNumber" /animate-integer +
 animate-integer :value="secondNumber" /animate-integer =
 animate-integer :value="result" /animate-integer 
 /div 

运行结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读