Vue3之列表动画和状态动画示例详解

目录
  • 概述
  • 示例解析
    • 列表动画
    • 状态动画
  • 总结

概述

列表动画和状态动画都是增加用户体验的方法，当一个列表添加数据或者移除数据时，如果直接添加，突然显示，未免有些突兀，而且用户可能会不知道此时已经有数据加入了，从列表中移除数据也是，用户很有可能不知道当前已经移除了哪一条数据。但是如果加上动画就会好很多了，有趣的动画可以吸引用户的注意力，让用户关注新增和移除的数据。这就是列表动画，而状态动画是指从一个状态到另一个状态的变化，如果直接变过去，就会显得比较生硬，但是如果是加了动画慢慢过渡过去会好很多。

示例解析

列表动画

如上图所示我们要展示一个数字构成的列表,右面有一个按钮，点击按钮会执行一个动画增加数字。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <style>
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move{
            transition: 2.5s ease-in;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               list:[1,2,3]
            }
        },
        methods: {
            handleClick(){
               this.list.unshift(this.list.length+1);
            }
        },
        template:
        `
            <div>
                <transition-group>
                <span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
                </transition-group>
                <button @click="handleClick">add</button>
            </div>
        `
    });
    const vm = app.mount('#root');
</script>

我们先是使用CSS将列表的动画效果定义出来，这个效果和之前讲的动画定义差不多，这里不过多赘述，定义好动画后，我们在Vue的template中使用一个span将我们的数字列表显示出来，然后最关键的是我们要使用 <transition-group>标签将我们要做动画的部分包裹起来。当我们点击按钮的时候，执行js函数往列表中新增一个列表长度加一的数。动画效果读者可以，运行查看。

状态动画

状态动画比较简单，就是从一个状态到另一个状态中间加一些过渡的值，主要是通过数据控制内容的展示，比如从1变到10，如果直接1马上变成10，则显得很生硬，但是中间加一写其他数字，比如2，3，4...最后再变成10就会好很多，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态动画</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 状态动画：通过数据控制内容的展示
 const app = Vue.createApp({
        data() {
            return {
               number:1,
               animateNumber: 1
            }
        },
        methods: {
            handleClick(){
                this.number =10;
                if(this.animateNumber<this.number){
                const animation =  setInterval(()=>{
                this.animateNumber += 1;
                    if(this.animateNumber === 10){
                    clearInterval(animation)
                     }
               },100);
               }
            }
        },
        template:
        `
            <div>
                <div>{{animateNumber}}</div>
                <button @click="handleClick">do</button>
            </div>
        `
    });
    const vm = app.mount('#root');
</script>

列表动画比较简单，我们点击执行按钮的时候，使用js函数每隔100 毫秒就去修改一下当前显示的值，直到值变成最终想要状态的值就停止。

总结

列表动画和状态动画都是为了增强用户体验，列表动画主要是在列表中的数据变化的时候执行的，而状态动画主要是当一个状态更换到零一个状态的时候执行，列表动画通过vue提供的<transition-group>标签包裹需要执行动画的部分实现，而列表动画通过控制数据内容的展示实现，本文介绍的都是简单的动画效果，读者若需要实现更炫丽的动画效果，请关注我们其它相关文章！

赞 (0)

相关推荐

  • 结合康熙选秀讲解vue虚拟列表实现

    结合康熙选秀讲解vue虚拟列表实现

    目录 场景 康熙选妃 多数据渲染 虚拟列表的概念 实现 基本实现 场景 康熙选妃 话说这年是康熙五十三年,天下太平,天下无人不感叹这“康熙盛世”啊,康熙自己也是开心的不得了啊,“朕奋斗了大半辈子,还不能享乐享乐,传命张廷玉来见我,我有事要让他办!” 康熙:衡臣啊(衡臣是张廷玉的字),这康熙盛世如何 张廷玉:皇上牛逼,皇上牛逼,皇上万岁 康熙:但是朕老了啊,但是朕不能服老,朕要证明给天下人看 张廷玉:皇上正值壮年,万岁万万岁 康熙:我不管,我要选妃,我要选妃,我要选妃!!! 张廷玉:我tm...你

  • vue 长列表数据刷新的实现及思考

    目录 开篇 一.效果展示 二.代码 开篇 通过 vue 进行列表展示的时候如果数据太多可能会卡顿,这里通过滑动计算只创建跟刷新可见部分 dom 元素,这里仅仅代表着复用思路 一.效果展示 两列均为局部可视范围内数据刷新 二.代码 实现的主要思路: 1.提前保留可视div的高度,计算出可视高度能填满情况下最少的单元格条数: 2.根据提供的每个单元格高度和总数据条数计算出总的可滑动div高度,使其可以滑动: 3.在上述可滑动div内部再包裹一层div,此节点的作用就是在滑动过程中,改变自身的 top

  • vue实现列表展示示例详解

    vue实现列表展示示例详解

    目录 Vue 的CSS之deep语法 ::v-deep classPrefix 前缀 给元素绑定class 总结 Object.freeze 关于Vue和ts的配合问题 ISO8601和dayjs库 一. ISO8601 1. Date对象=>ISO字符串 2. ISO字符串=>Date对象 JS操作时间的库-dayjs 安装 使用 JSON.parse的返回值没有类型 Vue 的CSS之deep语法 ::v-deep 我们知道,在Vue组件的style标签里,加上scoped属性,会使写的样

  • springboot vue项目后端列表接口分页模糊查询

    springboot vue项目后端列表接口分页模糊查询

    目录 基于 springboot+vue 的测试平台开发 一.分页插件 二.实现接口 1. 编写 Service 层 2. 编写 Controller 层 三.测试接口 1. 测试分页 2. 测试条件查询 基于 springboot+vue 的测试平台开发 继续更新 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据 可以通过项目名称查询指定的项目 新增项目 编辑项目 其他功能..

  • jQuery编程动画的基本方法示例详解

    目录 一.动画 .show() .hide() .fadeIn() .fadeOut() .animate() .slideDown() .slideUp() .delay() .clearQueue() .fadeTo() 一.动画 jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate(). .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法..show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作. 持续

  • history保存列表页ajax请求的状态使用示例详解

    目录 问题 优化前代码 history history.pushState() window.onpopstate 问题2 问题 最近碰到两个问题: 从首页进入列表页之后,点击下一页的时候,使用ajax请求更新数据, 然后点击浏览器“后退”按钮就直接返回到首页,实际这里想要的效果是返回列表页上一页. 在列表页分页为2的页面进入详情页,然后点击“后退”按钮,返回的事列表页分页为1的页面.没法记住之前分页状态. 优化前代码 代码如下,在页数变化的时候,去异步请求数据,渲染页面. const curr

  • vue3中的透传attributes教程示例详解

    vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    目录 1 packages 目录 1.1 foo 目录 1.2 yyg-demo-ui 目录 2 实现 foo 示例组件 2.1 初始化 package.json 2.2 初始化 foo 目录结构 2.3 定义 foo 组件的 props 2.4 实现 foo 组件 2.5 定义 foo 组件入口文件 3 实现 yyg-demo-ui 3.1 初始化 package.json 3.2 安装依赖 3.3 定义入口文件 前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.

  • Vue3之元素和组件的动画切换实现示例详解

    目录 前言 实例解析 元素间的动画切换 组件间的动画切换 总结 前言 当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从16:9切换到4:3时会出现黑边的情况,这时加一个转场动画,用户就不会看到这个黑边了,同样在网站开发中如果说加载的另一个页面网络不太好时,我们可以使用一个加载动画,让用户感觉当前系统仍然正常.不会出现“卡死”的假

  • Android Flutter实现3D动画效果示例详解

    Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • 利用Pygame制作简单动画的示例详解

    利用Pygame制作简单动画的示例详解

    目录 前言 计时器 绘制精灵 加载精灵 完整代码 前言 实现一个帧动画,使用的一个图,根据不同的时间显示不同的图. 使用的就是如下所示的一张图,宽度780 * 300 ,使用加载图片 260 * 150来实现. pygame.init() screen = pygame.display.set_mode((400, 300), 0, 32) pygame.display.set_caption("动画") while True: for event in pygame.event.ge

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • Flutter封装组动画混合动画AnimatedGroup示例详解

    目录 一.来源 二.AnimatedGroup使用示例: 三.AnimatedGroup源码 最后 一.来源 项目中遇到混合动画的情况,每次实现都需要生命一堆属性,让代码变得杂乱,难以维护. 参考 iOS 组动画 CAAimationGroup, 随花半天时间封装一个混合动画组件 AnimatedGroup. 此组件基于极简.高扩展.高适用的封装原则,基本满足当前项目开发. 二.AnimatedGroup使用示例: // // AnimatedGroupDemo.dart // flutter_

  • Android 补间动画及组合AnimationSet常用方法详解

    目录 补间动画 RotateAnimation 动画示例 ScaleAnimation 动画示例 TranslateAnimation 动画示例 AlphaAnimation 动画示例 AnimationSet 动画组合 动画示例 补间动画 Android常用的四种补间动画分别为RotateAnimation.ScaleAnimation.TranslateAnimation.AlphaAnimation,他们的父类为Animation,UML类图如下: 父类通用方法有: public void

随机推荐