首頁(yè) 猿問(wèn) js控制transition 失效問(wèn)題

js控制transition 失效問(wèn)題

JavaScript

元芳怎么了 2019-02-11 12:12:59

前端動(dòng)畫(huà)效果開(kāi)發(fā)時(shí)遇到如下問(wèn)題 , 有解決辦法 , 但是并不明白其中原理問(wèn)題如下 ;頁(yè)面存在 dom , 具有css屬性 opacity : 0 ;js在某一時(shí)段需要設(shè)置透明度變換的動(dòng)畫(huà)會(huì)出現(xiàn)問(wèn)題的操作方法是 :dom.style.cssText += ';-webkit-transition:opacity 500ms linear ; opacity:1;';這樣操作并不會(huì)按照過(guò)度執(zhí)行動(dòng)畫(huà) , 解決辦法如下 :dom.style.cssText += ';-webkit-transition:opacity 500ms linear ;';setTimeout(()=>{ dom.style.opacity = '1' ;} , 50)這樣就能起到作用;個(gè)人理解為 transition設(shè)置后需要 '適應(yīng)' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指點(diǎn)

查看完整描述

1 回答

慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊

transition是給元素添加過(guò)渡效果的，而判斷過(guò)渡效果是需要有值改變才會(huì)觸發(fā)，你的transition和opacity"幾乎"是同時(shí)設(shè)置的，當(dāng)然不會(huì)觸發(fā)transition的效果。

你想想，每個(gè)元素在你還沒(méi)有設(shè)置值的時(shí)候都是會(huì)有一些默認(rèn)值的，比如你就放個(gè)<div></div>上去，那么它的height默認(rèn)值在chrome下是0px，這時(shí)候如果你只是想添加個(gè)初始值，在hover的時(shí)候再去改變它的高度，你剛寫(xiě)上transition:width 1s ease; height:100px;width:100%，你就發(fā)現(xiàn)它開(kāi)始動(dòng)起來(lái)了，顯然有問(wèn)題呀。

你直接把-webkit-transition:opacity 500ms linear寫(xiě)在css里面就可以了吧？它始終會(huì)在值改變的時(shí)候才去觸發(fā)，你也不用寫(xiě)延遲了呀

反對(duì) 回復(fù) 2019-02-19