前言:
用css实现的一个表示实时效果的动画,
效果图展示:
实现代码:(用的ivew的card)
1.template:
<Card style="width:200px; margin:20px 10px 20px 10px;float:left; cursor:pointer;"
v-for="device in allDevices ">
<p slot="title" style='width:100px;height:40px;line-height:40px;'>
{{device.name}}
</p>
<!--动起来的小线条-->
<div slot='extra'>
<div class="loader-inner line-scale-pulse-out-rapid"
:class="{'success':device.status === 0,'fail':device.status === 1,'null':device.status === 2 }">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<ul>
<li class="clearfix ip" v-for='(item,index) in device.attachment' :key="index">
<div style='float:left;width:50%;' class='flowfix'>
{{item.name}}:
</div>
<div style='float:right;width:50%;' class='flowfix'>
{{item.value}}
</div>
</li>
</ul>
</div>
</Card>
2.data里面定义数据
allDevices:[
{
name:'1号机器',
status:0,
attachment:[
{name:'1号',value:'1'},
{name:'2号',value:'2'},
]
},
{
name:'2号机器',
status:1,
attachment:[
{name:'1号',value:'1'},
{name:'2号',value:'2'},
]
},
{
name:'3号机器',
status:2,
attachment:[
{name:'1号',value:'1'},
{name:'2号',value:'2'},
]
},
],
3.css样式(很重要)
.line-scale-pulse-out-rapid.success > div {
background-color: #4caf50;
}
.line-scale-pulse-out-rapid.null > div {
background-color: #f44336;
}
.line-scale-pulse-out-rapid.fail > div {
background-color: #ff9800;
}
.line-scale-pulse-out-rapid>div{
width:4px;
height:35px;
display:inline-block;
border-radius:2px;
margin:2px;
background-color:#fff;
vertical-align:middle;
-webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);
animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
}
.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){
-webkit-animation-delay:-.25s!important;
animation-delay:-.25s!important
}
.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){
-webkit-animation-delay:0s!important;
animation-delay:0s!important
}
@-webkit-keyframes line-scale-pulse-out-rapid{
0%,90%{
-webkit-transform:scaley(1);
transform:scaley(1)
}
80%{
-webkit-transform:scaley(.3);
transform:scaley(.3)
}
}
@keyframes line-scale-pulse-out-rapid{
0%,90%{
-webkit-transform:scaley(1);
transform:scaley(1)
}
80%{-webkit-transform:scaley(.3);
transform:scaley(.3)
}
}
把这三部分放到组件中,效果就可以展示了