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

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
    }
  }
})



运行结果：

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

推荐阅读

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

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

蜡笔小新 2024-12-06 10:35:33
css
构建个人博客站点：基于LAMP环境的WordPress部署指南

本文详细介绍如何利用已搭建的LAMP（Linux、Apache、MySQL、PHP）环境，快速创建一个基于WordPress的内容管理系统（CMS）。WordPress是一款流行的开源博客平台，适用于个人或小型团队使用。 ... [详细]

蜡笔小新 2024-12-23 20:23:57
css
解决Selenium浏览器实例化位置导致的闪退问题

本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ... [详细]

蜡笔小新 2024-12-23 16:09:49
css
配置WebStorm自动编译LESS文件并生成压缩CSS和源映射文件

本文详细介绍了如何在WebStorm中配置File Watchers，以实现在编辑LESS文件时自动生成压缩后的CSS文件和对应的源映射（.map）文件。通过简单几步设置，可以大幅提升前端开发效率。 ... [详细]

蜡笔小新 2024-12-23 15:50:50
label
在Xcode中配置自定义文本样式

本文探讨了如何在iOS开发环境中，特别是在Xcode 6.1中，设置和应用自定义文本样式。我们将详细介绍实现方法，并提供一些实用的技巧。 ... [详细]

蜡笔小新 2024-12-23 14:36:31
css
解决Anaconda安装TensorFlow时遇到的TensorBoard版本问题

本文介绍了在使用Anaconda安装TensorFlow时遇到的“Could not find a version that satisfies the requirement tensorboard”错误，并提供详细的解决方案，包括创建虚拟环境和配置PyCharm项目。 ... [详细]

蜡笔小新 2024-12-23 11:58:00
css
基于JQuery实现的评分插件

本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时，左侧的星星会变为实心，右侧保持空心，并显示对应的评分等级；移开鼠标后，所有星星恢复为空心状态。 ... [详细]

蜡笔小新 2024-12-23 10:09:44
view
Node.js 进程异常时自动发送邮件通知

在项目部署后，Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查，我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]

蜡笔小新 2024-12-23 08:56:34
css
有C和C++基础，如何提高面向对象的类的设计能力？

编写了几个500行左右代码的程序，但基本上解决问题还是面向过程的思维，如何从问题中抽象出类，形成类的划分和设计，从而用面向对象的思维解决问题？有这方面的入门好书吗？最好是结合几个具体的案例分析的 ... [详细]

蜡笔小新 2024-12-22 19:50:43
webkit
自定义CSS样式打造个性化HTML5视频播放器

本文详细介绍如何使用CSS自定义HTML5视频播放器的样式，涵盖常见属性及跨浏览器兼容性问题。发布时间：2020-09-14 14:46:29；来源：亿速云；阅读量：58；作者：小新。 ... [详细]

蜡笔小新 2024-12-22 18:36:22
vue.js
JavaScript前端开发中常用的四种继承方法详解

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

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

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

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

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

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

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

蜡笔小新 2024-12-02 11:22:01
view
Vue.js 安装指南及基础使用教程

本文详细介绍Vue.js的安装步骤及其基本使用方法。Vue.js是一个流行的前端框架，由尤雨溪创立，适用于快速构建用户界面。 ... [详细]

蜡笔小新 2024-11-30 14:38:30

祢好世界末日

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

Tags | 热门标签

RankList | 热门文章