写点什么

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

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

关注

评论

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

专家观点∣国产化价值替代之路—钢铁企业的特征管理

用友BIP

国产价值替代

Illustrator 2024 for mac(标准矢量插画设计软件) v28.1完整激活版

mac

苹果mac Windows软件 矢量图形编辑软件 Illustrator 2023 AI023

Debian pip 错误 error: externally-managed-environment 解决方法

百度搜索:蓝易云

Linux 运维 pip 云服务器 Debian

35 | Trie树:如何实现搜索引擎的搜索关键词提示功能

鲁米

数据驱动国资监管 用友BIP助力提高国有资本运营效能

用友BIP

数据驱动

专业强大的远程管理:Royal TSX激活最新版

胖墩儿不胖y

远程办公 远程控制软件 Mac软件

用友iuap智能中台“数智员工”在中核四川环保成功上岗

用友BIP

iuap

教你使用Prometheus-Operator进行K8s集群监控

华为云开发者联盟

云原生 k8s 后端 华为云 华为云开发者联盟

专业强大的英语学习工具:Eudic欧路词典增强激活版

mac大玩家j

英语学习 Mac软件 英语学习工具

何怡澜:从抖音网红到芯片创业者的跨界之旅

科技热闻

让网页自己总结、解答、翻译、创作?你的超级助理已上线

新消费日报

定档12月28日,WAVE SUMMIT+深度学习开发者大会2023狂欢来袭!

飞桨PaddlePaddle

人工智能 深度学习 开发者 WAVE SUMMIT

2023年中国IT用户满意度征集结果公布

Geek_2d6073

企业数智化进阶模型,大型企业实现数智融合的成功之“道”

用友BIP

企业服务大模型

淘宝订单API接口在电商行业中的应用与实现

Noah

EMQ 与边缘计算社区共同举办全球边缘计算大会上海站,12月16日

EMQ映云科技

边缘计算 mqtt emq emqx

Tableau Desktop 2019 for Mac(全能数据分析工具) v2019.1.0永久激活版

mac

数据分析工具 Tableau Desktop 2019 苹果mac Windows软件

即时通讯技术文集(第27期):实时音视频技术合集(Part2) [共17篇]

JackJiang

网络编程 即时通讯 IM

什么是数字化营销?如何进行数字化营销?数字化有多重要?

天津汇柏科技有限公司

# 浅谈分布式操作系统KubeWharf 的第二批开源项目

苏沐

#k8s #云原生 分布式操作系统 #运维 KubeWharf

发布jar包到maven中央仓库

不在线第一只蜗牛

Java 仓库 镜像仓库

2024上海智慧城市展会(世亚智博会)促进长三角地区智慧城市发展

AIOTE智博会

智博会 上海智博会 智慧城市展

DBA解决慢查询问题的利器

NineData

sql 工具 dba NineData 慢查询分析

软件测试/人工智能丨如何利用 ChatGPT 编写测试方案

测试人

人工智能 软件测试

最常用的4种光纤接口结构是什么样式呢?

小齐写代码

技术分享 | ChatGPT API 调用总超时?破题思路在这

LigaAI

Python 后端 openai chatgpt api chatpt

1688一件采购实现指南:含代码实现采购流程

Noah

CentOS-8 - AppStream 错误:为 repo ‘AppStream‘ 下载元数据失败解决教程。

百度搜索:蓝易云

云计算 Linux centos 运维 云服务器

软件测试/人工智能丨利用 ChatGPT 编写测试报告

测试人

人工智能 软件测试

C# 从代码入门 Mysql 数据库事务

EquatorCoco

C# MySQL 数据库 编程语言

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