50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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:576726
用户头像

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

关注

评论

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

fcpx音量大小调节插件 CrumplePop Levelmatic

Rose

fcpx音量大小调节插件 CrumplePop Levelmatic

文献解读-《Beta-amylase and phosphatidic acid involved in recalcitrant seed germination of Chinese chestnut》

INSVAST

农业 基因数据分析 生信服务

面试官:Kafka中的key有什么用?

王磊

Plugin Alliance Bettermaker Passive Equalizer(Bettermaker无源均衡器)

Rose

Output Thermal for Mac 操作简便的动态多级失真插件

Rose

从零开始带你玩转 AI 变现公开课

测吧(北京)科技有限公司

测试

Skew for mac 快速倾斜形状sketch工具+Skew使用方法

Rose

sketch工具 Skew插件下载 快速倾斜形状工具插件

VMware Cloud Foundation 9 发布 - 领先的多云平台

sysin

云计算 vSphere vmware esxi vcf

ps天文景观插件 Astro Panel Pro for Mac v6.0.0苹果版

Rose

ps天文景观插件 Astro Panel Pro Photoshop插件下载安装

Apache RocketMQ 批处理模型演进之路

阿里巴巴云原生

Apache 阿里云 RocketMQ 云原生

A股迎来中报季,合合信息文档解析技术辅助大模型深度解读财报

合合技术团队

金融 PDF 科技

Arturia V Collection X for mac(经典合成器和键盘合集) v27.08.2024最新版

Rose

合成器 Arturia V Collection X

mac游戏:魔兽争霸3冰封王座Warcraft III for mac 版

你的猪会飞吗

魔兽争霸3 冰封王座 Mac游戏下载

输入一句话,生成一个应用:低代码平台如何借力AI大模型颠覆开发模式

天津汇柏科技有限公司

低代码平台 AI大模型

人工智能 | 清华大学ChatGLM大模型

测吧(北京)科技有限公司

测试

15款中国风大气水墨笔触PS笔刷

Rose

After Effects插件:AutoCircularMotion(图层圆周运动工具AE脚本)

Rose

After Effects插件 图层圆周运动工具 AutoCircularMotion

中标智能制造!亚信科技+用友网络,助重庆大型制造企业重塑生产管理

亚信AntDB数据库

AntDB

IoTDB 在顶级会议 VLDB 2024:四篇最新论文入选,特邀做 TPC 报告与讨论会!

Apache IoTDB

深度解析HarmonyOS SDK实况窗服务源码,Get不同场景下的多种模板

HarmonyOS SDK

HarmonyOS

华为亮相KubeCon China 2024 ,引领全球智能化新浪潮

新消费日报

FCPX插件motionVFX mLowers动态下标题

Rose

fcpx插件 fcpx标题模板 motionVFX mLowers 动态下标题

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