写点什么

AngularJS 1.4 对动画系统进行了彻底的重构

  • 2015-04-21
  • 本文字数:1501 字

    阅读完需:约 5 分钟

AngularJS 团队刚刚宣布了 1.4 发布候选版的问世,对内部的动画代码系统进行了彻底的重构。

在 1.4 版本中,ngAnimate 使用了新的动画系统,通过回调钩子支持基于 CSS 的动画以及基于 JavaScript 的动画。

Google 在这个 JavaScript 框架的发布说明中表示,在新的 $animate 特性中“ngAnimate 的全部代码都进行了重写,以使内部的动画代码更加灵活、重用性更高并且性能更出色。”

Matias Niemelä是来自 Google 的一位软件工程师,他在 Google+ 上的一篇帖子中宣布了在 1.4 版本中 ngAnimate 所包含的“一系列新特性与 bug 修复”。

包括以下内容:

  • 使用 $animateCss 通过命令式的方式控制或触发基于 CSS 的转换和关键帧
  • (使用 ng-animate-ref)生成跨页面的跨动画元素
  • 使用 $animate 中新的 API 处理回调
  • 包括大量与回流相关的 bug 修复,并且将提供一个更好的基础,以便在即将到来的 1.5 版本中能够实现更多的特性。

$animate 在新的版本中也产生了大量的破坏性改动。其中最引人注目的一条是,JavaScript 与 CSS 动画将无法并行地运行了。在之前的版本中,通过使用 ngAnimate,当检查到多个动画运行时,可以同时运行 CSS 与 JS 的动画。

不过,虽然这一特性从 1.4 版本中被移除,但 AngularJS 对此表示“通过将 $animateCss 注入到某个由 JavaScript 定义的动画中,并且在其中创建自定义的基于 CSS 的动画,可以实现相同的效果,甚至还能够带来更多的可能性”。

$animate 在新版本中的破坏性改动还包括 $animate.enabled() 这个函数的参数的变化,当调用 $animate.enabled() 这个函数时使用某个单一元素的的话,那么该函数将表现为一种 getter 方法。

$animate 的另一个破坏性发动是“在动画的 promise 回调中无需调用 $scope.$apply 或 $scope.$digest 了,因为该 promise 已经通过一个 digest 进行自动解析了(但如果没有对 promised 进行链式调用,digest 是不会自动运行的)”

使用 $animateCss 通过命令式的方式控制或触发基于 CSS 的转换和关键帧

(使用 ng-animate-ref)生成跨页面的跨动画元素

使用 $animate 中新的 API 处理回调

包括大量与回流相关的 bug 修复,并且将提供一个更好的基础,以便在即将到来的 1.5 版本中能够实现更多的特性。

复制代码
// < 1.4
$animate.enter(element).then(function() {
$scope.$apply(function() {
$scope.explode = true;
});
});
// 1.4+
$animate.enter(element).then(function() {
$scope.explode = true;
});

可以在这里找到关于其它破坏性改动的更多细节。

Angular 1.4 版本的开发代号为 smooth-unwinding ,其中也包括了多个性能改进之处,包括对 ngOptions 的改动,现在它只在使用 track by 的情况下才会对 ngModel 进行深度等同性测试。此外,当 Angular app 卸载时,$rootScope 也会移除历史事件的处理器。

1.4 原本计划在 2015 年 3 月份发布,当时 ng-conf 这个关注于 AngularJS 的大会正在如火如荼地进行中。在 1.4 版本发布之后,AngularJS 1.5 的工作就将正式展开。Brad Green 是 Google 工程团队的总监,也是 Angular 开发计划的领导人,他在 ng-conf 大会之后宣布,1.5 版本的主题是支持与Angular 2 的整合。

虽然整个Angular 社区对于2.0 版本仍然保有很大的疑惑和困惑,但Google 已经表示他们将继续在 angularjs.org 上维护 Angular 1.X 版本,而在 angular.io 上发布 Angular 2.0 的 Alpha 版本。在 ng-conf 大会上 Google也再次对社区明确表态:在Angular 2.0 版本的流量占到上风之前,他们绝对不会结束Angular 1.X 的生命。

查看英文原文 AngularJS 1.4 Completely Refactors Animation System

2015-04-21 08:576579
用户头像

发布了 428 篇内容, 共 190.9 次阅读, 收获喜欢 39 次。

关注

评论

发布
暂无评论
发现更多内容

EasyRecovery如何恢复ps的psd文件

淋雨

数据恢复 EasyRecovery

CSS之选择器

Augus

CSS 12月日更

再添神器!Paddle.js 发布 OCR SDK

百度开发者中心

OCR paddle.js

Veritas:2022年数据安全及合规领域行业预测

BeeWorks

自定义View:如何实现点击图标旋转的动画效果

Changing Lin

12月日更

缓存数据的淘汰之路(上)

卢卡多多

28天写作 签约计划第二季 12月日更

2021年11月云主机性能评测报告

博睿数据

云主机 博睿数据 数据链DNA

结算中心全国集中化支撑解决之道

鲸品堂

java序列化实现原理和深度分析

Java个体户

Java

EMQ 映云科技走进高校,与浙大城市学院联合促进物联网人才培养

EMQ映云科技

物联网 mqtt

探索圈外的世界 | GTLC 全球技术领导力峰会·厦门站圆满收官

TGO鲲鹏会

区块链 方法论 技术管理 GTLC

2600亿!全球最大中文单体模型鹏城-百度·文心发布

百度大脑

人工智能

缓存数据的淘汰之路(中)

卢卡多多

缓存 28天写作 签约计划第二季 12月日更

PackML从会到不会——状态、管理标签(5)

陈的错题集

标准化 PackML

百万级 QPS 业务新宠,金山办公携手 Apache APISIX 打造网关实践新体验

API7.ai 技术团队

云原生 API网关 wps API Gateway Apache APISIX

架构实战营模块一学习总结

Evan

架构实战营

Python代码阅读(第69篇):首字母大小写变换

Felix

Python Code 字符串 阅读代码 Python初学者

2021年11月国产数据库大事记

墨天轮

数据库 opengauss TiDB oceanbase 国产数据库

构建信创基础软硬件共同体,DataPipeline与中科曙光完成产品兼容互认证

DataPipeline数见科技

大数据 中间件 服务器 数据融合

Gartner预测全球人工智能软件市场将在2022年达到620亿美元规模

BeeWorks

架构实战营模块一作业

Evan

架构实战营

斟茶兵——远程进程管理

白粥

进程管理 运维开发 系统维护 离职交接 日常工作

Cypress 基础 - 元素的定位

汪子熙

CSS html Cypress 28天写作 12月日更

博睿数据携手火山引擎,共建新云新未来

博睿数据

FPGA大发展!现在或许是从事FPGA行业的最好时代

科技新消息

使用 HTML、CSS 和 JavaScript 制作的随机密码生成器

海拥(haiyong.site)

JavaScript 密码 28天写作 签约计划第二季 12月日更

一周信创舆情观察(11.29~12.5)

统小信uos

30个类手写Spring核心原理之环境准备(1)

Tom弹架构

Java spring 源码

普华基础软件加入龙蜥并成为理事单位,共创开源操作系统新生态

OpenAnolis小助手

龙蜥社区

缓存数据的淘汰之路(下)

卢卡多多

缓存 28天写作 签约计划第二季 12月日更

ONES X 蓝城兄弟|有机的研发管理改进是最健康的颠覆

万事ONES

项目管理 ONES 项目管理工具

AngularJS 1.4对动画系统进行了彻底的重构_JavaScript_James Chesters_InfoQ精选文章