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的方式,實現背景閃爍動畫觸發。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,241評論 0 6
  • 主要還是自己看的,所有內容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,375評論 0 25
  • Vue是一個前端js框架,由尤雨溪開發,是個人項目 Vue近幾年來特別的受關注,三年前的時候angularJS霸占...
    6e5e50574d74閱讀 559評論 0 0
  • 1. Vue 實例 1.1 創建一個Vue實例 一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實...
    王童孟閱讀 1,029評論 0 2
  • ## 框架和庫的區別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,961評論 1 4