亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

js控制transition 失效問題

js控制transition 失效問題

元芳怎么了 2019-02-11 12:12:59
前端動畫效果開發時遇到如下問題 , 有解決辦法 , 但是并不明白其中原理問題如下 ;頁面存在 dom , 具有css屬性 opacity : 0 ;js在某一時段需要設置透明度變換的動畫會出現問題的操作方法是 :dom.style.cssText += ';-webkit-transition:opacity 500ms linear ; opacity:1;';這樣操作并不會按照過度執行動畫 , 解決辦法如下 :dom.style.cssText += ';-webkit-transition:opacity 500ms linear ;';setTimeout(()=>{    dom.style.opacity = '1' ;} , 50)這樣就能起到作用;個人理解為 transition設置后需要 '適應' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指點
查看完整描述

1 回答

?
慕桂英4014372

TA貢獻1871條經驗 獲得超13個贊

transition是給元素添加過渡效果的,而判斷過渡效果是需要有值改變才會觸發,你的transitionopacity"幾乎"是同時設置的,當然不會觸發transition的效果。

你想想,每個元素在你還沒有設置值的時候都是會有一些默認值的,比如你就放個<div></div>上去,那么它的height默認值在chrome下是0px,這時候如果你只是想添加個初始值,在hover的時候再去改變它的高度,你剛寫上transition:width 1s ease; height:100px;width:100%,你就發現它開始動起來了,顯然有問題呀。

你直接把-webkit-transition:opacity 500ms linear寫在css里面就可以了吧?它始終會在值改變的時候才去觸發,你也不用寫延遲了呀


查看完整回答
反對 回復 2019-02-19
  • 1 回答
  • 0 關注
  • 371 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號