VUE表格数据变动单行背景闪烁实现

微信图片_20191024144610.jpg

前端时间做期权交易项目时，需要做每支期权，实时交易价格改变的背景闪烁效果，只要是价格变动，就需要数据相应得背景闪烁一次，如上图所示。由于用的是vue技术栈，就在想如何通过vue的技术方案实现，最后想到用vue的自定义指令来实现该效果。

大家都知道，css的动画效果只有在dom初始化时和新增class时才会触发，所以我想到用vue的自定义指令的update钩子函数去监听双向绑定的价格数据，单行数据id不变的情况下，如果价格改变，那么界面上相应展示的效果就是数据位置不变，但是该行数据的背景闪烁，数据项值变动。自定义指令代码如下：

import Vue from 'vue';

export const animationTrigger = Vue.directive('animation-trigger',{
  update(el,binding){
    if(binding.value === binding.oldValue){
      return;
    }
    //指令传入得触发动画得className
    let className=binding.arg;
    el.classList.remove(className);
    setTimeout(()=>{
      el.classList.add(className);
    },100);
  }
});

实际使用代码示例:

<div class="row animation-bg" v-animation-trigger:{className:animation-bg}="item.data[2]"
             v-for="(item,index) in upDataList" :key="item.id">
  该行数据示例...        
</div>

样式代码示例:

@keyframes gradientChange {
        0% {
          background-color: #1f2025;
        }
        20% {
          background: linear-gradient(90deg, rgba(40, 30, 36, .8) 0%, rgba(90, 38, 43, .8) 100%);
        }
        40% {
          background: linear-gradient(90deg, rgba(40, 30, 36, .8) 0%, rgba(90, 38, 43, .8) 100%);
        }
        60% {
          background: linear-gradient(90deg, rgba(40, 30, 36, .8) 0%, rgba(90, 38, 43, .8) 100%);
        }
        80% {
          background: linear-gradient(90deg, rgba(40, 30, 36, .8) 0%, rgba(90, 38, 43, .8) 100%);
        }
        100% {
          background-color: #1f2025;
        }
      }

      .animation-bg {
        animation: gradientChange 1s linear;
      }

如上示例代码所示，item.data[2]为实时数据的现价，若现价改变那么涨跌幅和现价数据都会改变，通过vue的v-for指令遍历出的数据，通过item.id作为key，那么根据vnode的优化策略，实际dom未直接移除，只是将dom内的内容更新。用v-animation-trigger:animation-bg="item.data[2]"传入实时值和class名称，触发update钩子函数的更新，对该行dom元素执行先移除class再加上class的方式，实现背景闪烁动画触发。