1、背景:
可视化大屏想要页面看起来不那么死板的话,可以做一些动态效果,实现方式有很多,比如具有动效的图片、视频,CSS样式,CSS+JS等来实现。主要是利用animation属性****+ @keyframes来实现
本文主要使用CSS样式实现动效,利用JS控制生效的时间间隔
2、实现效果:
数字滚动
3、效果图的完整代码:
CSS样式:
.scroll-animation {
animation: scroll 1s; // 1秒的动效
animation-fill-mode: forwards; /* 保持动画结束状态 */
}
@keyframes scroll {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
JS控制动效的间隔时间(若需求动态频率在几秒内 可以不需要JS来控制,直接在 animation把时间设置高一点)
const isShowAnimation = ref(false);
function triggerAnimation() { // 控制页面动效的间隔 利用样式class类的显示与隐藏来控制
isShowAnimation.value = true;
setTimeout(() => {
isShowAnimation.value = false;
}, 1000); // 1秒后暂停动画
}
onMounted(() => {
setInterval(triggerAnimation, 150000); // 这里设置了15秒后 才动效一次
})
//注:记得离开页面时销毁定时器哦
HTML页面
<div :class="{'scroll-animation': isShowAnimation}"> 合格率 </div>
4、补充:
若你页面动效间隔比较短的话,我们可以直接用CSS样式实现,就更简单了,如:
.scroll-animation {
animation: scroll 2s forwards infinite; // infinite是无限循环 默认是1 表示只动态1次
}
@keyframes scroll { // 动效的效果设置
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
5、Animation属性说明:
- animation-name: 指定要绑定到元素的关键帧名称。这是必需的。
- animation-duration: 指定动画完成一个周期所需的时间,默认值是 0s。
- animation-timing-function: 指定动画速度变化的函数,默认值是 ease。
- animation-delay: 指定动画开始前的延迟时间,默认值是 0s。
- animation-iteration-count: 指定动画应该播放的次数,默认值是 1。可以使用 infinite 表示无限次循环。
- animation-direction: 指定动画播放的方向,默认值是 normal。其他值包括 reverse、alternate 和 alternate-reverse。
- animation-fill-mode: 指定动画在开始之前和结束之后应用于元素的样式,默认值是 none。其他值包括 forwards、backwards 和 both。
- animation-play-state: 指定动画的播放状态,默认值是 running。其他值包括 paused。