[问题] 如何设定进入网页几秒后移除一块div

楼主: iceleaf (我行我素 我型我塑)   2016-06-26 01:26:48
新手提问~
目前我已经用three.js架好一个3D场景,放在一个div内 z-index设为1,
另一个div用来跑进度条动画,z-index设为2,
主要是因为加载3D场景需要一段时间,
这段时间会用z-index:2的这个div挡住后面场景,
如下图(左上是进度条):
https://www.dropbox.com/s/f6uqfloi8j8ri6t/2016-06-26_011158.jpg?dl=0
想请问动画完成后,怎么移除这个div,希望能有淡出效果。
还想请问有没有推荐好的范例书,目前自学中,网络上比较难找到系统性的教学,
麻烦版上为我解惑,感激不尽.....
作者: oToToT (屁孩)   2016-06-26 08:10:00
setInterval
作者: pm2001 (做个盾牌眼球兵吧)   2016-06-26 11:01:00
Interval是间隔耶 要也是settimeout
作者: Hevak (Arthow Eshes)   2016-06-26 12:40:00
我的话大概会setTimeout(function () {document.getElementById("DIV的ID").classList.add("透明度0的class");setTimeout(function() {document.getElementById("DIV的ID").remove();), 淡出动画的秒数);})第1行setTimeout我打错orz,应该要丢在加载完成的callback里面才对然后div本身的css加上transition秒数(会变成淡出的秒数)再增设一个{opacity: 0;}的class
作者: oToToT (屁孩)   2016-06-26 13:52:00
我是想说Interval把opacity调一调就好了
楼主: iceleaf (我行我素 我型我塑)   2016-06-26 14:36:00
感谢楼上各位大大指点方向 :)感谢Hevak,写的好详细,我研究看看,对一些语法还不是很熟~
作者: Hevak (Arthow Eshes)   2016-06-26 15:15:00
pm2001主要讲的点是一次性的东西用setTimeout,重复性的才用setInterval对了,如果有jQuery,可以直接用fadeOut()就好,比这样写简单得多....jQuery fadeOut()的场合连css class都不用另外写
楼主: iceleaf (我行我素 我型我塑)   2016-06-26 21:40:00
后来试着用jQuery做,超快的~感谢!
作者: xdraculax (首席怪叔叔)   2016-07-01 09:29:00
会 three.js 不会淡出 0.0

Links booklink

Contact Us: admin [ a t ] ucptt.com