css3 - transition transform初始display:block怎么就沒移動效果?
問題描述
https://jsfiddle.net/zjmove/2...
---看完xiaoboost的回答---最后這樣改最合適:https://jsfiddle.net/25d3ga9j...我沒說清楚,其實我并不需要next的動畫,只需要left從右往左的效果。至于為什么初始display:block就沒有動畫效果,可能這樣初始item就已經顯示出來了,force reflow沒來得及重繪;display:none就不需要重繪頁面了,left時直接從右往左就行了。再次感謝。
--只能說問題和這個force reflow有關,到底什么原理還是不清楚的。
--不同瀏覽器差異大啊上面的改法,在firefox里完美,在chrome57(ubuntu)里鼠標移動會閃動一次
--初始display:block,打印transforms屬性,發現force reflow并沒有生效。總結一下:display:block并且有過渡效果(transition)時就不生效。https://jsfiddle.net/25d3ga9j...
問題解答
回答1:首先,我個人覺得這是因為網頁渲染進程和js進程是互斥所導致的。
具體的可以看看這個問題:當我用js給元素添加className時,瀏覽器發生了什么? 我覺得高票答案已經說的很清楚了,你在js腳本中加入的這么一句:
$(’.item’)[0].offsetWidth;
我猜也是想要強制重繪頁面吧?
我個人并沒有研究過這方面瀏覽器具體的實現,但是根據我個人的觀察,讀取DOM的信息雖然會強制重繪網頁,但實際上也只是內部數據的重新計算,DOM的改變并不會反映到頁面中,真正的頁面重繪還是只能等到當前js進程完成之后。
具體到你這個例子中,為了以示區別,我把.next和.left在css中的寬度稍微改了改,然后js中打印出添加上.next類之后的寬度:
.item.next { display: block; width: 50%; transform: translate3d(100%, 0, 0); left: 0;}.item.next.left { width: 100%; transform: translate3d(0, 0, 0); left: 0;}
$(’.item’).addClass(’next’);console.log($(’.item’)[0].offsetWidth); $(’.item’).addClass(’left’);
在這里你會看到,打印出來的寬度只有一半,說明在內存中的DOM數據的確是已經重新計算了,但是頁面卻并沒有重繪。 和那邊那個問題中的解決方案一樣,你也只能用異步函數,在頁面效果切換的空隙中把進程空出來給頁面渲染,這樣你才能看到動態效果。
比如你這里,這么改就行了:
$(’.item’).addClass(’next’);setTimeout(() => { $(’.item’).addClass(’left’);}, 1000);
相關文章:
1. mysql 查詢身份證號字段值有效的數據2. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?3. 視頻文件不能播放,怎么辦?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口,操作之后關閉,主窗口會得到相應的響應,例如網站的某些登錄界面,django后臺的管理等,這是怎么實現的呢?9. javascript - ios返回不執行js怎么解決?10. android - 分享到微信,如何快速轉換成字節數組
