vue实现动态列表尾部添加数据执行动画

目录
  • 动态列表尾部添加数据执行动画
    • 先上动画
  • 动态数据使用wowjs显示动画
    • 1.通过npm安装
    • 2.在main.js中引入animate.css

动态列表尾部添加数据执行动画

先上动画

  • 动态控制节点数量(目前只显示6个节点)
  • 尾部添加几个item,头部则删除几个item
  • 触发 transition-group 动画
  • splice 的使用方法

代码:

<style lang="scss">
.content {
  display: flex;
  width: 600px;
  height: 50px;
  margin: 100px auto;
}
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
}
.list-complete-enter,
.list-complete-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>
<template>
  <div class="vueBox">
    <transition-group class="content" name="list-complete" tag="div">
      <span
        v-for="item in list"
        v-bind:key="item.value"
        class="list-complete-item"
      >
        {{ item.name }}
      </span>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "slideanimation",
  data() {
    return {
      list: [
        {
          name: "苹果",
          value: "1.68",
        },
        {
          name: "橘子",
          value: "0.9",
        },
        {
          name: "香蕉",
          value: "2.58",
        },
        {
          name: "猕猴桃",
          value: "3.2",
        },
        {
          name: "灵梦",
          value: "1.2",
        },
        {
          name: "李子",
          value: "13.2",
        },
      ],
    };
  },
  mounted() {
    // 定时模拟的socket的 推送数据, 需求: 页面只显示6个节点,推送几个新的数据,则删除头部几个数组。
    setInterval(() => {
      this.animation();
    }, 3000);
  },
  methods: {
    // 生成指定 随机范围的 整数
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    animation() {
      let newItems = [...this.list];
      // 来一波随机个数,随机数组
      let randomCount = 1,
        addItems = [];
      randomCount = this.randomNum(1, 3);
      console.info("生成随机数 - 尾部添加 - 头部删除", randomCount);
      Array.from(new Array(randomCount), (n, i) => i).forEach(() =>
        addItems.push({
          name: (Math.random(0, 1) * 1000).toFixed(0),
          value: Math.random(0, 1),
        })
      );
      // 删除 数组 头部 几个item
      newItems.splice(0, randomCount);
      // 数组 尾部 添加 几个item
      newItems.splice(newItems.length, 0, ...addItems);
      // 触发 transition-group 动画
      this.list = [...newItems];
    },
  },
};
</script>

动态数据使用wowjs显示动画

1.通过npm安装

npm install wowjs --save-dev

animate.css会自动安装。

2.在main.js中引入animate.css

import 'wowjs/css/libs/animate.css

在组件需要的地方引入wowjs

有两种使用方式:

第一种:

import {WOW} from 'wowjs'   
    mounted() {
      new WOW().init()
    }

第二种:

import WOW from 'wowjs'   
  mounted() {
     new WOW.WOW().init()
   }

wow实例化里面的配置参数

自己选择性添加配置参数

infinite无限次播放

如过添加动画的元素渲染数据是请求接口渲染的   那么实例化wow一定得在接口请求结束之后使用this.$nextTick()在这个函数里面执行

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • vue实现动态添加数据滚动条自动滚动到底部的示例代码

    在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>) 这个一直找不到原因,可能是我vue的版本是2.2不支持

  • Vue实现指令式动态追加小球动画组件的步骤

    1. 小球组件 我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-ui template模板 <template> <div class="ball-wrapper"> <transition @before-enter="beforeEnter" @enter="enter" @afte

  • Vue 实现列表动态添加和删除的两种方法小结

    下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g

  • vue实现动态列表尾部添加数据执行动画

    目录 动态列表尾部添加数据执行动画 先上动画 动态数据使用wowjs显示动画 1.通过npm安装 2.在main.js中引入animate.css 动态列表尾部添加数据执行动画 先上动画 动态控制节点数量(目前只显示6个节点) 尾部添加几个item,头部则删除几个item 触发 transition-group 动画 splice 的使用方法 代码: <style lang="scss"> .content {   display: flex;   width: 600px

  • Vue实现动态创建和删除数据的方法

    视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ

  • vue实现动态列表点击各行换色的方法

    只是模拟一练习 v-for v-on v-bind的一个简单demo 代码思路: 遍历出data里面的数据 v-for 给li加点击事件 绑定class样式 怎么控制样式的显示 通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: <div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{

  • vue实现商品列表的添加删除实例讲解

    我们首先来看下代码: <div id="app"> <div class="container"><form class="form-inline"> <div class="form-group"><label for="exampleInputName2">ID:</label> <input id="example

  • JavaScript中动态向表格添加数据

    利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>职位</th> <th>

  • Ajax动态为下拉列表添加数据的实现方法

    1. 前台jsp,新建一个下拉控件 <select id="seldvd" onChange="sel_onchange(this)"></select> 2. js部分,建一个function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,获取传来的下拉列表的数据,动态填充 <span style="white-space:pre"> </span>fun

  • java 在file的尾部添加数据的两种方法总结

    java 在file的尾部添加数据的两种方法总结 问题描述:   在文件的末尾追加内容 方法1:利用RandomAccessFile类  1.将randomAccessFile模式设置为rw  2将randomAccessFile移动(seek)到文件末尾  3追加数据  4关闭流 方法2:利用FileWriter类  1.将FileWriter构造方法第二个参数置为true.表示在尾部追加  2追加数据  3.关闭流 实现代码: package cn.com; import java.io.F

  • Vue.js+HighCharts实现动态请求展示时序数据

    本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template>   <el-container>     <el-header>       <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

  • jQuery实现在列表的首行添加数据

    jQuery中可以通过append在列表的最后添加数据,也可以通过prepend在列表的最前面添加数据 方法很简单: 复制代码 代码如下: jQuery('#comment_list').prepend('<li>hello www.jb51.net</li>'); 另外附上jquery实现连续向textarea文本域添加数据的代码. <%@ page language="java" contenttype="text/html; charset

随机推荐