前端技術週刊 2019-01-07：CSS 動畫

2019-01-07

前端快爆

• Chrome 72 已經進入了 beta 階段。新增：公有類成員的聲明和初始化、一些 DevTools 新功能（可視化性能指標、高亮 text nodes、複製節點的 JS 訪問路徑）等；廢棄：頁面 unload 的時候將不能使用 window.open() 打開一個新頁面了，出於安全考慮再也不渲染 FTP 協議下的文件，統一改成下載。🔗

點評：在更新日誌中還提到 "support for private class fields is coming soon." ，賀老的怒火恐怕難以平息了……

• Flutter 1.0 發佈，Flutter 是一款基於和 Chromium 同源的 Skia 圖形庫和 Dart 語言，以高速和跨平臺爲賣點的 UI 框架。🔗

點評：Flash 的思路交織 Google 的技術！ 附一段 Flutter 開發者訪談。

• Firefox 66 實現了 Dynamic（動態）import()，須要在開啓 about:config 中啓用 javascript.options.dynamicImport 開關，此前，Chrome 6三、Safari 11.1 均已經支持。🔗

全民目睹

這是一個全新的符合阿里媽媽營銷平臺定位的特點欄目，咱們將選擇一些被普遍傳播或新奇有趣的線上產品和營銷案例在這裏分享，但願能帶來一些視覺、創意、技術融合的啓發。

騰訊新聞：重回 1978

騰訊新聞爲記念改革開放四十年製做，經過重力感應使一個球掉落到不一樣的時代記憶中。🔗

我與 TapTap 的兩週年

能夠自由滾動的橫向畫卷，配合滾動時的視差效果讓人得到驚奇體驗。🔗

螞蟻莊園背後的技術與思考

剛剛召開的 D2 論壇中悠鶴分享了螞蟻莊園這一擁有海量用戶的產品背後的技術與思考，官方文稿還沒出，先經過槍版一睹爲快。🔗

專題：CSS 動畫

本週爲 @淨翼(dongshitou) 爲咱們帶來的 CSS 動畫專題。

基礎

• CSS Animation 的屬性詳解
• CSS Transition 的標準與兼容
• 前端中的變換矩陣

優化

• 如何使用 Timeline 工具
• Timeline 中一幀的解剖
• 避免大型、複雜的佈局和佈局抖動
• 正確的 GPU 加速動畫
• 關鍵渲染路徑
• CSS Triggers

DEMO

• CSS Factory
• 按鈕描邊動畫
• 時鐘加載動畫
• steps() 行走的貓
• Google 風格的加載動畫

---

本期編輯：@池冰；審閱：@承虎；專題供稿：@淨翼。