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