当前位置: 开发笔记 > 前端 > 正文

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

作者：祢好世界末日 | 来源：互联网 | 2022-02-26 09:32

这两天学习了Vue.js 感觉渡系统这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 Vue 的过渡系统提供了非常多简单的方法

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

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

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

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

状态动画和watcher

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

Js代码中引入：

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

js需要添加以下引用：


通过组件组织过渡
管理太多的状态转换会很快的增加 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
    }
  }
})



运行结果：

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

推荐阅读

js
vue 如何将输入框的输入自动小写转大写（使用 vmodel 时采取另一种方式）

前言：小写转大写，可以用过滤器实现，但当使用v-model时就不行了，这里有解决方案。转载请注明出处：http ... [详细]

蜡笔小新 2024-12-06 10:35:33
js
QUIC协议：快速UDP互联网连接

QUIC（Quick UDP Internet Connections）是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP，并结合了TLS级别的安全性，提供了更高效、更可靠的互联网通信方式。 ... [详细]

蜡笔小新 2024-12-28 12:33:18
js
技术分享：从动态网站提取站点密钥的解决方案

本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]

蜡笔小新 2024-12-28 04:11:47
js
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
html
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
js
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
js
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新 2024-12-27 12:34:14
vue
Vuetify：备受推崇的 Material Design 风格 Vue UI 框架

Vuetify 是一款基于 Vue.js 的开源 UI 框架，以其精致的 Material Design 风格组件库在全球范围内受到广泛欢迎。 ... [详细]

蜡笔小新 2024-12-19 15:15:20
js
JavaScript前端开发中常用的四种继承方法详解

本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]

蜡笔小新 2024-12-18 11:08:28
js
Vue 子传父

案例1：在子组件中两个按钮1和-1，点击后修改count整个操作的过程还是在子组件中完成，但是之后的展示交给父组件这样，我 ... [详细]

蜡笔小新 2024-12-11 13:03:12
npm
Node.js与npm安装及Vue项目搭建指南

本文详细介绍了如何安装Node.js和npm，以及如何使用npm安装Vue及其相关工具，包括vue-router和vue-cli，并创建一个简单的Vue项目。 ... [详细]

蜡笔小新 2024-12-11 10:47:49
js
JavaScript实现双向数据绑定的方法详解

本文详细介绍了如何使用JavaScript实现数据的双向绑定，包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]

蜡笔小新 2024-12-11 05:40:01
vue.js
解析 localhost 与本地 IP 下页面渲染差异的原因

本文探讨了在使用 localhost 和本地 IP 地址访问相同网页时出现的渲染差异现象，通过对比两种环境下的页面显示效果，并结合多种可能的原因进行了分析，最终得出了可能导致这种现象的具体因素。 ... [详细]

蜡笔小新 2024-12-08 18:53:47
js
VueJS多页面应用配置指南

本文探讨如何在VueJS项目中通过配置vue.config.js文件实现多页面应用（MPA），特别是针对管理端和客户端的不同需求。 ... [详细]

蜡笔小新 2024-12-02 11:22:01
js
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新 2024-12-27 17:52:34

祢好世界末日

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章