在大数据可视化开发中,总有一些ui效果不是在echarts,hightcharts等三方插件库中可以找到的,这就需要自己手写,动画效果还是需要熟悉css3 animate属性的。上代码:
template模板:这里我考虑到分为两层结构,一层为底色,一层为动画层,在上层做动画处理。
<div class="item_part1_des item_part1_des8">
脚本类型调用次数
</div>
<div class="item_part3_script_unit">(单位:次)</div>
<div class="item_part3_scriptType">
<ul>
<li>数据采集</li>
<li>数据清洗</li>
<li>数据加工</li>
<li>数据汇集</li>
</ul>
</div>
<div class="item_part3_scriptCount">
<ul id="loadbar1">
<li v-for="(item, index) in scriptList" :id="'layerFill'+index" :class="index < scriptTypeNum.cleaning ? 'bar' : ''"></li>
</ul>
<ul id="loadbar2">
<li v-for="(item, index) in scriptList" :id="'layerFill'+index" :class="index < scriptTypeNum.processing ? 'bar' : ''"></li>
</ul>
<ul id="loadbar3">
<li v-for="(item, index) in scriptList" :id="'layerFill'+index" :class="index < scriptTypeNum.collection ? 'bar' : ''"></li>
</ul>
<ul id="loadbar4">
<li v-for="(item, index) in scriptList" :id="'layerFill'+index" :class="index < scriptTypeNum.collect ? 'bar' : ''"></li>
</ul>
</div>
</div>
js:虽然是vue的项目,数据双向绑定,但是加载动画效果是还是用jq操作dom添加删除类更高效一些。
$('#loadbar1').removeClass('ins').delay(10).queue(function (next) {
$(this).addClass('ins');
next();
});
$('#loadbar2').removeClass('ins').delay(10).queue(function (next) {
$(this).addClass('ins');
next();
});
$('#loadbar3').removeClass('ins').delay(10).queue(function (next) {
$(this).addClass('ins');
next();
});
$('#loadbar4').removeClass('ins').delay(10).queue(function (next) {
$(this).addClass('ins');
next();
});
css:这里我只给出了必要的几个元素的样式以及动画的css,没要求但是也考虑到了moz的兼容性问题。
.ins .bar{
width: 14px!important;
height: 4px!important;
border: 3px solid #38c3da!important;
-webkit-animation:fill 5s linear forwards;
-moz-animation:fill 5s linear forwards;
animation-direction:reverse;
-webkit-animation-direction:reverse;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#layerFill0{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;}
#layerFill1{-moz-animation-delay:1s;-webkit-animation-delay:1s;}
#layerFill2{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;}
#layerFill3{-moz-animation-delay:2s;-webkit-animation-delay:2s;}
#layerFill4{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;}
#layerFill5{-moz-animation-delay:3s;-webkit-animation-delay:3s;}
#layerFill6{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;}
#layerFill7{-moz-animation-delay:4s;-webkit-animation-delay:4s;}
#layerFill8{-moz-animation-delay:4.5s;-webkit-animation-delay:4.5s;}
#layerFill9{-moz-animation-delay:5s;-webkit-animation-delay:5s;}
@-moz-keyframes fill{
0%{ opacity:0;}
100%{ opacity:1;}
}
@-webkit-keyframes fill{
0%{ opacity:0;}
100%{ opacity:1;}
}
以上为呼吸灯效果的大致代码,有经验的前端小伙伴可以交流指正。