vue采坑@keyframe:分页时钟功能
问题描述:第一次刷新页面能实现指针旋转,后面再切换分页或刷新页面均不能实现动画效果分析:切换页面时,vue只更改了数据,样式没有跟着改变解决:<div class="chart" v-for="(item,index) in currentDetectors" :key="index"><div class="chartContent" v-if="i...
·
问题描述:
第一次刷新页面能实现指针旋转,后面再切换分页或刷新页面均不能实现动画效果
分析:
切换页面时,vue只更改了数据,样式没有跟着改变
解决:
<div class="chart" v-for="(item,index) in currentDetectors" :key="index">
<div class="chartContent" v-if="item.ID1">
<div class="electChart">
<div class="detector">
<div
class="pointer"
ref="pointer"
v-bind:style="{
//核心:在绑定@keyframes时,借助每个item.ID1的不用,为每个元素设置于以前的@keyframes,这样页面在刷新的时候就会连同样式一块更新(注意:这里的item.ID1是我自己的list的属性)
animation: 'pointermove'+(item.ID1)+' 3s forwards',
}"
></div>
<div
class="numbers"
v-if="item.ID1"
>{{item.validLow+'、'+item.validHigh+'、'+item.realtimev}}</div>
<div class="pointerUnit">{{item.vUnit}}</div>
</div>
</div>
<div class="detectName">{{item.vDevicedesc}}</div>
<div class="detail">
<div class="detail1">{{item.runstate}}</div>
<div class="detail2">{{item.sitename}}</div>
<div class="detail3">{{item.PicName}}</div>
<div class="detail4">{{item.location}}</div>
</div>
</div>
// 指针动画设置
setPointer() {
this.currentDetectors.forEach((item, index) => {
if (item.ID1 != '') {
// alert(11);
let rotate =
(item.realtimev / (item.validHigh - item.validLow)) * 298;
if (rotate > 298) {
rotate = 298;
}
let style = document.createElement('style');
style.setAttribute('type', 'text/css');
document.head.appendChild(style);
let sheet = style.sheet;
sheet.insertRule(
`@keyframes pointermove` +
//这里创建相应的@keyframes
item.ID1 +
`{
from {
transform: rotate(300deg);
}
to {
transform: rotate(` +
(300 + rotate) +
`deg);
}
}`,
0
);
}
});
}
效果:
更多推荐
已为社区贡献4条内容
所有评论(0)