transition的问题

Question

做一个轮播图,基本想法是这样:
<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回答 萌新还没开始学库~

Answer 1

出于性能，浏览器会尽可能的把最近的需要渲染的动作整合到一起执行。

可以使用以下两种方式实现一种 nextTick，在上一次渲染结束后执行。

slide.style.cssText = "opacity:0;transition-property:opacity;transition-duration:1s;transition-timing-function:ease-in;"

// 1
requestAnimationFrame(function (){
    slide.style.cssText = "opacity:1;"
})

// 2
setTimeout(function (){
    slide.style.cssText = "opacity:1;"
}, 0)