前端技术周刊 2019-01-07:CSS 动画

40次阅读

共计 962 个字符,预计需要花费 3 分钟才能阅读完成。

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 63、Safari 11.1 均已经支持。????

全民目击
这是一个全新的符合阿里妈妈营销平台定位的特色栏目,我们将选择一些被广泛传播或新奇有趣的线上产品和营销案例在这里分享,希望能带来一些视觉、创意、技术融合的启发。
腾讯新闻:重回 1978
腾讯新闻为纪念改革开放四十年制作,通过重力感应使一个球掉落到不同的时代记忆中。????
我与 TapTap 的两周年
可以自由滚动的横向画卷,配合滚动时的视差效果让人获得惊奇体验。????

蚂蚁庄园背后的技术与思考
刚刚召开的 D2 论坛中悠鹤分享了蚂蚁庄园这一拥有海量用户的产品背后的技术与思考,官方文稿还没出,先通过枪版一睹为快。????

专题:CSS 动画
本周为 @净翼 (dongshitou) 为我们带来的 CSS 动画专题。
基础

CSS Animation 的属性详解
CSS Transition 的标准与兼容
前端中的变换矩阵

优化

如何使用 Timeline 工具
Timeline 中一帧的解剖
避免大型、复杂的布局和布局抖动
正确的 GPU 加速动画
关键渲染路径
CSS Triggers

DEMO

CSS Factory
按钮描边动画
时钟加载动画
steps() 行走的猫
Google 风格的加载动画

本期编辑:@池冰;审阅:@承虎;专题供稿:@净翼。

正文完
 0