【css】动画重置

小鱼仔么么

已于 2022-09-23 12:03:59 修改

阅读量913

点赞数 2

分类专栏： sass 文章标签： css 动画前端

于 2022-09-23 11:01:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43918803/article/details/127006618

版权

sass 专栏收录该内容

3 篇文章

订阅专栏

列表循环

需求

左侧切换同时右侧重置轮播
在这里插入图片描述
右侧轮播css实现

.active {
	animation: scollTop 30s linear 0s infinite;
	-webkit-animation: scollTop 30s linear 0s infinite;
}

/* 动画方法 */
@keyframes scollTop {
	from {
		top: 0;
	}
	to {
		top: -100%;
	}
}
@-webkit-keyframes scollTop {
	from {
		top: 0;
	}
	to {
		top: -100%;
	}
}

通过css无法实现动画的重置，无论左边在哪个区域中，右侧滚动都接着上一个滚动部位滚动；所以只能通过js实现

document.querySelector(".scroll").className = "scroll";
window.requestAnimationFrame(function(time) {
  document.querySelector(".scroll").className = "scroll active";
});

requestAnimationFrame

requestAnimationFrame/setTimeout/setInterval这三个方法都属于浏览器的window对象的方法，在过去只持支定时器setTimeout()和它setInterval()方法， requestAnimationFrame()新增的一个方法，可以更好的服务于2Dcanvas动画、WebGL动画等方面。

setTime/setInterval 都有清除定时器的方法
clearTimeout() / clearInterval()
requestAnimationFrame 也有自己的清除方法
cancelAnimationFrame()

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
requestAnimationFrame是宏任务，在主线程执行
requestAnimationFrame参数是一个回调函数，这个回调函数会在浏览器重绘之前调用