做一个轮播图,基本想法是这样:
<div.container><img.slide src=""></div>
通过改变src地址来实现轮播
在写过渡效果的时候遇到了问题(效果为淡入opacity:0→1)
主要代码如下:
slide.src = "images/banner" + index +".jpg";
slide.removeAttribute("style");
slide.style.cssText = "opacity:0;"
slide.style.cssText = "opacity:1;transition-property:opacity;transition-duration:1s;transition-timing-function:ease-in;"
这里写remove的想法是不想有淡出效果
现在的问题是在浏览器中打断点,一步步来,是有效果的,但是现实是没有过度效果的,why?
补充下:希望能用原生JS回答 萌新还没开始学库~
解决方案
出于性能，浏览器会尽可能的把最近的需要渲染的动作整合到一起执行。
可以使用以下两种方式实现一种 nextTick，在上一次渲染结束后执行。
slide.style.cssText = "opacity:0;transition-property:opacity;transition-duration:1s;transition-timing-function:ease-in;"// 1requestAnimationFrame(function (){ slide.style.cssText = "opacity:1;"})// 2setTimeout(function (){ slide.style.cssText = "opacity:1;"}, 0)