在给banner指示器做动画的时候出了个问题。先放一个我想要的效果如下:鼠标移入时轮播停止计时,移出后重新计时
(后来用纯CSS实现了,效果更好一些,可看bootstrap4轮播图指示器动画代码 - 轮播进度条)
这里用的是bootstrap的banner,需要在原有的指示器上加before或after实现。
费我时间的是,banner:hover时需要将before动画重置,但是before是伪类,不在dom节点上,不可以直接操作。经过一番深思熟虑,只有操作.active
最有效(bootstrap会在当前显示的banner添加active类)
/* 指示器动画 begin*/
.carousel-indicators>li{
position: relative;
background-color: rgba(170, 170, 170, 0.8);
}
.carousel-indicators .active::before {
content: "";
position: absolute;
background-color: #fff;
left: 0;
height: inherit;
width: 0px;
animation: banner-active 3s linear infinite;
}
@keyframes banner-active{
from {width: 0px;}
to {width: inherit;}
}
/* 指示器动画 end */
那么只能用jquery实现了(没用前后端分离),一开始我是这么写的
$("#home-banner").hover(function(){
$(".carousel-indicators .active").removeClass("active").addClass("active")
},function(){
$(".carousel-indicators .active").removeClass("active").addClass("active")
})
然而removeClass
之后紧接着用addClass
,并不能起到重置的效果,这两行代码相当于没执行。。
这种问题不好百度,最后结合了很多个方法,改成如下。解决了
$("#home-banner").hover(function(){
var abanner = $(".carousel-indicators .active").removeClass("active")
setTimeout(function(){
abanner.addClass("active")
},0);
},function(){
var abanner = $(".carousel-indicators .active").removeClass("active")
setTimeout(function(){
abanner.addClass("active")
},0);
})
我也不知道具体为什么,用js单线程也觉得解释不了,如果是同步执行的按说一开始写的是可以的呀。最后还是用setTimeout
的异步来解决了。(具体的原因可能有 js对dom的操作原理、浏览器对css的解析原理)有知道原因的大神还望解答一下
对setTimeout(fn,0)感兴趣的同学可以看看setTimeout(fn, 0)原理,随便推荐几个链接:setTimeout原理、通过setTimeout理解js异步原理、神奇的setTimeout(fn,0)
猜想 2020/05/29
纯属推测
$(".carousel-indicators .active").removeClass("active").addClass("active")
之所以不生效:猜想js渲染dom步骤如下- js渲染dom,要将自己目前线程的执行完之后,一同渲染给dom树。
- 执行
.removeClass("active")
时js会去dom树中拉取这个节点,形成这么一条数据:key=.carousel-indicators .active
,value=["active","class2","class3"]
(得到的节点的所有class),然后移除active
:value=["class2","class3"]
- 执行
.addClass("active")
时,在value中加入active
:value=["active","class2","class3"]
- 然后继续执行此线程下边的内容
- 最后线程任务执行完毕,这个dom节点的Class数据,其实是没有变化的。js把此线程中的dom操作,传递给dom树渲染,而对于没有变化的东西,dom树并不会重新渲染,但是实际上确实操作了这个节点的class,所以在DevTools中class会闪一下,说明操作了这个class。但是实际上又确实没有改动什么内容。
- (class1 class2 没有实际意义,为了看DevTools节点操作闪动的范围,是具体的类名还是整个class属性。结果当然是整个class属性)
- (class1 class2 没有实际意义,为了看DevTools节点操作闪动的范围,是具体的类名还是整个class属性。结果当然是整个class属性)
- 而
setTimeout()
,是异步的,在主线程A外另起了一个B线程,那么对这个class的操作数据,是在A执行完之后执行的(setTimeout原理),如此一来,dom树就会先去掉active,再加上active。即完成了我们想要的重置动画。
其他思路
有机会试一下:$.parser.parse()
让JQuery框架将页面重新解析一次
😁欢迎加入QQ群交流: [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入!