微信圖片_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的方式，實現背景閃爍動畫觸發。