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回答 萌新还没开始学库~