使用css渐变和javascript创建动画

我正在开发一个cordova应用程序，它允许我们扫描rfid标签。根据RSSI信号强度，我需要显示一个条形图，显示rfid标签的距离。离标签越近，条越高，走得越远，条越小。我建立了以下，我认为我可以使用。不幸的是，动画不是很平滑，在移动应用程序上速度很慢。我认为问题在于，我正在显示/隐藏div，并使用超时来模拟动画。我想我可能需要改变这一点，以使用带有渐变的css动画。但是我不太熟悉怎么做，我不知道如果我只想显示一小部分，我会如何隐藏梯度的一部分。任何关于如何做到这一点的建议都将不胜感激

更新：我上传了一段我想要实现的视频。很遗憾，我无法将此上载到SO。当我读取标签时，动画会发生变化。因此，我可以前后移动标签，并根据它应该改变的酒吧

---

您可以使用javascript设置高度动画，使用css设置渐变动画。我在这里更新鼠标，但你可以让它更新每一个扫描输入，并完成同样的事情。您只需要为您想要的任何其他渐变变体设置更多css类

var最小值=15；
var最大值=100
函数randPercent（）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
$（“.statusBar”）.mouseover（函数（）{
var barSize=randPercent（）；
如果（条形尺寸>50）{
$（this.addClass（'close'）；
}否则{
$（this.removeClass（'close'）；
}
$（此）。设置动画({
高度：barSize+“%”
},300
);
});
.wrapper{
高度：100px；
位置：相对位置；
}
.状态栏{
宽度：50px；
最小高度：10px；
边框：1px纯黑；
位置：绝对位置；
底部：0；
}
.bg{
-webkit转换：背景1s；
-moz跃迁：背景1s；
-ms转换：背景1s；
-o-转变：背景1s；
过渡：背景1s；
背景：rgb（71234,46）；
}
.bg.close{
背景：rgb（247,49）；
}
您可以使用javascript设置高度动画，使用css设置渐变动画。我在这里更新鼠标，但你可以让它更新每一个扫描输入，并完成同样的事情。您只需要为您想要的任何其他渐变变体设置更多css类


var最小值=15；
var最大值=100
函数randPercent（）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
$（“.statusBar”）.mouseover（函数（）{
var barSize=randPercent（）；
如果（条形尺寸>50）{
$（this.addClass（'close'）；
}否则{
$（this.removeClass（'close'）；
}
$（此）。设置动画({
高度：barSize+“%”
},300
);
});
.wrapper{
高度：100px；
位置：相对位置；
}
.状态栏{
宽度：50px；
最小高度：10px；
边框：1px纯黑；
位置：绝对位置；
底部：0；
}
.bg{
-webkit转换：背景1s；
-moz跃迁：背景1s；
-ms转换：背景1s；
-o-转变：背景1s；
过渡：背景1s；
背景：rgb（71234,46）；
}
.bg.close{
背景：rgb（247,49）；
}
为了获得更好的性能，最好设置比例动画，而不是高度动画。（关于动画性能的文章非常好）

下面是一个你如何做到这一点的例子。这并不完美，但希望它能给你一个好的起点


var input=document.querySelector（'input'）；
addEventListener（'input'，function（）{
var值=该值/100；
var bar=document.querySelector（'.meter bar'）；
bar.style.transform='scaleY（'+value+'）；
//调整背景大小以考虑比例变化，可能有更好的解决方案
bar.style.backgroundSize='200px'+（300/值）+'px'；
});
输入{
宽度：200px；
}
.米{
宽度：200px；
高度：300px；
边缘顶部：20px；
背景色：#E5；
}
.米柱{
宽度：100%；
身高：100%；
背景色：#333；
背景图像：线性渐变（至顶部，#64b572 0%，#9fc63d 50%，#f63908 100%）；
背景尺寸：200px0；
背景位置：底部；
变换原点：底部；
变换：scaleY（0）；
变换：变换1s轻松，背景大小1s轻松；
不透明度：0.8；
}
为了获得更好的性能，最好设置比例动画，而不是高度动画。（关于动画性能的文章非常好）

下面是一个你如何做到这一点的例子。这并不完美，但希望它能给你一个好的起点


var input=document.querySelector（'input'）；
addEventListener（'input'，function（）{
var值=该值/100；
var bar=document.querySelector（'.meter bar'）；
bar.style.transform='scaleY（'+value+'）；
//调整背景大小以考虑比例变化，可能有更好的解决方案
bar.style.backgroundSize='200px'+（300/值）+'px'；
});
输入{
宽度：200px；
}
.米{
宽度：200px；
高度：300px；
边缘顶部：20px；
背景色：#E5；
}
.米柱{
宽度：100%；
身高：100%；
背景色：#333；
背景图像：线性渐变（至顶部，#64b572 0%，#9fc63d 50%，#f63908 100%）；
背景尺寸：200px0；
背景位置：底部；
变换原点：底部；
变换：scaleY（0）；
变换：变换1s轻松，背景大小1s轻松；
不透明度：0.8；
}

你能展示你想要实现的东西的模型吗？从描述中还不完全清楚您希望该动画如何工作。它多久更新一次？酒吧大小和梯度都会改变吗？他们如何改变？颜色会变吗？等等，@TinMonkey请看dropbox loca的视频