Question

js连续改变css属性时，transitoin失效了

主要的css代码:
#notice-box{
position:fixed;
top:-100%;
left:20%;
display:none;
opacity: 0;
transition:top 1s ease;
}

javascript代码
document.getElementById('notice-box').style.display = 'block';
document.getElementById('notice-box').style.opacity = '1';
document.getElementById('notice-box').style.top = '10%';
这三句想让notice-box缓慢地出来，但是实际效果是相当于transition没有设置，直接就弹出来了。

而把js代码改成：
document.getElementById('notice-box').style.display = 'block';
alert(1);
document.getElementById('notice-box').style.opacity = '1';
document.getElementById('notice-box').style.top = '10%';
会弹出一个提示，点击确定后可以看到notice-box缓慢地从上面下来也有透明度渐变的效果

怎么解决js连续修改css代码transition失效的问题？？

Answer 1

你不应该这样处理！！这里不是失效,而是js执行时间很短的时候,浏览器还没有渲染HTML元素,js已经执行完了。当前就不会出现渐变效果,而如果你弹出alert的时候把js中断了,然后先渲染一遍HTML了，等执行完js的时候再来渲染HTML就有了所谓的渐变效果。

一般我们修改css都是在事件回调的时候处理的。在触发某个事件的时候必然已经渲染HTML了，事件的触发有一个过程，所以就会有渐变。

Answer 2

这里牵扯到浏览器的元素绘制问题, 具体的可以不用懂

只需要知道可以使用一些技巧可以强制浏览器更新元素的样式信息使得它知道你应用了过渡就好

举一个常用的方式

	document.getElementById('notice-box').style.display = 'block';
	document.getElementById('notice-box').clientWidth
	document.getElementById('notice-box').style.opacity = '1';
	document.getElementById('notice-box').style.top = '10%';