知更鸟

robin


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

  • 旅行

  • 公益404

  • 站点地图

Web Animations API入门教程第2部分:动画和时间线控制

发表于 2017-06-26 | 更新于: 2017-06-26 | 分类于 javascript
字数统计: 1,008 | 阅读时长 ≈ 4

Web Animations API入门教程第2部分:动画和时间线控制

这是 Web Animations API 入门教程系列的第2部分。我在2016年6月更新了系列内容,因为Chrome和Firefox都推出了主要更新(以及一些小规格更改)。如果您有想法或问题,或看到我已经误解了该规范,请在Twitter上与@dancwilson联系。

现在我们了解如何使用Web Animations API 创建基本动画,让我们来谈谈状态(states),控制(controls),回调(callback)和时间轴(timelines)。

阅读全文 »

Web Animations API 入门教程第1部分:创建一个基本的动画

发表于 2017-06-26 | 更新于: 2017-06-26 | 分类于 javascript
字数统计: 1,057 | 阅读时长 ≈ 4

Web Animations API 入门教程第1部分:创建一个基本的动画

这是 Web Animations API 入门教程系列的第1部分。我在2016年6月更新了系列内容,因为Chrome和Firefox都推出了主要更新(以及一些小规格更改)。如果您有想法或问题,或看到我已经误解了该规范,请在Twitter上与@dancwilson联系。

我们之前初步看了下 Web Animations API,但是我们没有得到任何真正的细节,所以现在我们来看看。

WAAPI(Web Animations API, 以下均简称WAAPI)为您提供更多的控制比您可能已经习惯使用的CSS动画,但在我们进入这些演示之前,我们需要设置基本目标:如何通过此API创建基本动画?

阅读全文 »

让我们谈谈 Web Animations API

发表于 2017-06-25 | 更新于: 2017-06-25 | 分类于 javascript
字数统计: 1,166 | 阅读时长 ≈ 4

这是 Web Animations API 入门教程系列的总结部分。我在2016年6月更新了系列内容,因为Chrome和Firefox都推出了主要更新(以及一些小规格更改)。如果您有想法或问题,或看到我已经误解了该规范,请在Twitter上与@dancwilson联系。

2014年夏天,Google宣布通过Polymer在网页中展示Material设计…使用polyfill技术支持即将推出的标准Web Animations API。

我没有听说过这个API,但是我很感兴趣,特别是因为它谈到了MotionPath(运动路径)效果。这还没有实现(你会在第5部分发现这是什么),但是它的目标是提供一种组合CSS,JS和SVG的动画方式,让我感兴趣。一年以后,Chrome和Firefox开始实施,polyfill的进步是稳定的,现在是认真看待它的时候了。

但是很少有人在谈论WAAPI!我希望开始一系列突出浏览器(和polyfill)功能的帖子,探索为什么我们想要这个API,并找出细微差别。希望我们也能让更多的人讨论和使用这个API。

阅读全文 »

css 动画和 Web Animation API(WAAPI)对比

发表于 2017-06-22 | 更新于: 2017-06-22 | 分类于 css
字数统计: 2,641 | 阅读时长 ≈ 10

css 动画和 Web Animation API(WAAPI)对比

有一个JavaScript的动画原生API,称为Web Animation API。我们在这篇文章中称之为WAAPI。MDN有很好的文档,Dan Wilson 有一个伟大的系列文章。

在本文中,我们将比较WAAPI和CSS中完成的动画。

阅读全文 »

webpack3官方正式发布,亮点:作用域提升,“魔法注释”,以及更多新特性!

发表于 2017-06-21 | 更新于: 2017-06-22 | 分类于 javascript
字数统计: 1,188 | 阅读时长 ≈ 4

作用域提升,“魔法注释”,以及更多新特性!

原文

在我们发布了 webpack v2 之后,我们曾向社区做了一些承诺。 我们承诺,我们将提供用户投票的功能。 此外,我们承诺我们的发布周期会 更快,更稳定。

这次没有 beta 版本,完全向下兼容。我们承诺让你们、让 webpack 成长的社区更轻松的使用。webpack 团队自豪地宣布,今天我们已经发布了 webpack 3.0.0! 现在就可以下载或升级!

npm install webpack@3.0.0 --save-dev

或者使用

yarn add webpack@3.0.0 --dev

从 webpack 2 迁移到 3,只需要执行升级命令,在使用上没有任何差别。我们将这次升级标记为版本的重大升级,是因为内部的突破性变化可能会影响某些插件的使用。

到目前为止,98%的升级的用户都没有遇到任何不兼容!

阅读全文 »

Flow和TypeScript之间的区别和优劣

发表于 2017-06-14 | 更新于: 2017-06-14 | 分类于 javascript
字数统计: 1,422 | 阅读时长 ≈ 5

Flow和TypeScript之间的区别和优劣

采用Flow&TypeScript, 两者上手流程之间的比较。

让我们想象一下我们想要采用一种类型检查器的场景…

阅读全文 »

使用RXJS组合、过滤和映射数据流的值

发表于 2017-06-05 | 更新于: 2017-06-05 | 分类于 javascript
字数统计: 2,312 | 阅读时长 ≈ 9

使用RXJS组合、过滤和映射数据流的值

查询可观测序列

在事件桥接 一文中,我们将现有的DOM和Node.js事件转换成可观察的序列以订阅它们。在本主题中,我们将把可观察序列的父级class视为IObservable对象,其中Rx组件提供通用LINQ操作符来操作这些对象。大多数操作符获取可观察的序列并对其执行一些逻辑并输出另一个可观测序列。另外,从代码示例可以看出,甚至可以在源序列上使用多个运算符,最终将结果序列调整到您的确切需求。

阅读全文 »

如何调试Node.js|使用谷歌chrome浏览器调试Node.js

发表于 2017-06-02 | 更新于: 2017-06-02 | 分类于 Node
字数统计: 754 | 阅读时长 ≈ 3

如何调试Node.js|使用谷歌chrome浏览器调试Node.js

如何调试 Node.js, 还在使用 console.log 来调试 Node.js 吗,可以像调试前端页面一样调试 Node.js!

调试是从软件应用程序中识别和删除错误的任务,而不仅仅是打印代码中的值。本文介绍如何使用最新的Google Chrome DevTools高效地调试Node.js程序。

阅读全文 »

RXJS我该选用哪个操作符之-创建篇

发表于 2017-06-01 | 更新于: 2017-06-01 | 分类于 javascript
字数统计: 560 | 阅读时长 ≈ 2

RXJS该怎么上手?这么多操作符该用哪个?RXJS比较强大,操作符众多,想熟悉需要比较长时间的运用,所以大部分新手都比较疑惑应该使用哪些操作符去实现自己的数据流的操作。

更多详情请翻阅 RXJS中文翻译文档

我该选用哪个操作符? - 创建操作符

使用此页面查找Observable符合您需求的类型创建操作:

阅读全文 »

RXJS我该选用哪个操作符之-实例操作符篇

发表于 2017-06-01 | 更新于: 2017-06-01 | 分类于 javascript
字数统计: 1,179 | 阅读时长 ≈ 4

RXJS比较强大,操作符众多,想熟悉需要比较长时间的运用,所以大部分新手都比较疑惑应该使用哪些操作符去实现自己的数据流的操作。

更多详情请翻阅 RXJS中文翻译文档

我该选用哪个操作符? - 实例操作符

使用此页面通过类型查找Observable 适合您需要的实例运算符:

阅读全文 »
1…456…10
robin.law

robin.law

96 日志
9 分类
119 标签
RSS
GitHub E-Mail Twitter
© 2014 — 2018 robin.law | Site words total count: 119.0k
由 Hexo 强力驱动
|
主题 — NexT.Muse v5.1.4
0%