Firefox 這個功能不就是前端初學者的福音嗎?
正文
瀏覽器的Devtools可以幫助我們調試CSS,例如:新增修改刪除某個CSS屬性、查看盒子模型、有顏色選擇器供你修改顏色...
Chrome也很貼心地在你鼠標移動到某個屬性上時,在頁面中同步給你展示效果,比如你為 ??.demo?
? 新增了 ??margin: 20px 0?
? 的樣式,那你鼠標移動到Chrome Devtools中 ??.demo?
? 的 ??margin?
? 屬性上時,會在頁面中展示所有應用了該樣式的元素,如下圖:
可能這個功能不足為奇,但 Firefox 這個應該能讓你連連稱贊!
先不廢話,上效果圖:
??transform?
? 這個屬性應該說是非常常見了,??translate?
?、??rorate?
?、??scale?
? 這些都是讓元素進行各種形式2D、3D的變化,而上圖就是演示了當鼠標移動到Devtools中??transform?
?的值上時,左側會同步展示該元素在應用了 ??transform?
? 前后的對應關系,例如變換前這個節點對應變換后的哪個節點、變換前后的位置分別在哪
可能有人要說,這好像也沒啥,我用肉眼也能看出前后變化的對應關系。emmm,嗯,不過重點不是靜態的呀,總歸我們是要應用到一些動畫里的,尤其是特別特別復雜的動畫,可能光憑腦袋想象是無法做到的
所以接下來我們給該元素加上復雜的動畫效果
.demo {
width: 100px;
height: 100px;
background-color: red;
margin: 300px;
/* 超級復雜的變換 */
transform: transform: translate(100px,100px) rotate(45deg) scale(0.5) rotateZ(45deg) skewY(45deg);;
transition: all 4s ease; /* 加上動畫效果 */
}
先不用 Firefox 的功能來看一遍是什么樣的:
不展示運動軌跡
再來看看應用上 Firefox 的功能的效果:
展示運動軌跡
效果應該很明顯了,有運動軌跡時可以讓你看清變換過程中每個節點的運動軌跡,如果還看不清,可以把動畫時間修改成 ??10s?
?? 甚至 ??20s?
?