速来报名!AICon北京站鸿蒙专场~ 了解详情
写点什么

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

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

关注

评论

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

云智慧AIOps研究院来咯~

云智慧AIOps社区

技术 算法 数据 智能运维 指标

GitHub上标星120K!Alibaba官网发布了这份Java全栈知识体系手册

Java~~~

Java 架构 面试 JVM 多线程

GAIA:智能运维领域通用公开数据集

云智慧AIOps社区

算法 AIOPS 数据集 场景 智能运维

【架构设计模块七】:王者荣耀商城异地多活架构设计

Ryoma

27W字总结阿里Java高并发编程:案例+源码+面试+系统架构设计

Java~~~

Java 架构 面试 算法 多线程

云智慧智能研究院实习生招聘信息~只等优秀的你!

云智慧AIOps社区

深度学习 招聘 异常检测 实习 智能运维

Navicat Premium 查询 x 列时不显示

玄兴梦影

MySQL navicat select

无场景不智能-面向场景的智能运维算法体系

云智慧AIOps社区

算法 日志 场景 智能运维 数据指标

基于深度学习的日志异常检测

云智慧AIOps社区

深度学习 招聘 异常检测 实习 智能运维

“IBP在城市大脑项目中的应用”入选工信部2021年大数据产业发展试点示范项目名单

云计算

【布道API】关于 API 分页

devpoint

API REST API 9月日更

谈 C++17 里的 FlyWeight 模式

hedzr

c++ 设计模式 Design Patterns 享元模式 flyweight

加速国产开源软件创新,云智慧AIOps社区正式发布

云智慧AIOps社区

开源 算法 数据 场景 智能运维

TLS协议分析 (六) handshake协议扩展

OpenIM

机器学题平台PAI论文入选国际顶会KDD-构建端到端的大规模AI工程能力

阿里云大数据AI技术

10款低/无代码开发平台哪个才是适合你的?

低代码小观

程序员 低代码 无代码 低代码平台 无代码平台

如何让项目准时上线?

石云升

项目管理 管理 引航计划 内容合集 9月日更

女科学家流失之殇

脑极体

Filecoin价格今日走势:filecoin暴涨!Filecoin未来会涨到多少钱?

区块链 分布式存储 filecoin未来价格预测? filecoin价格走势 filecoin大涨

Kubernetes踩坑问题集

玏佾

Kubernetes k8s k8s文档

Java设计模式如何优雅的使用本地缓存?

张音乐

Java 缓存 9月日更

职场浅谈三则

姬翔

9月日更

阿里内部流传的JDK源码剖析手册!GitHub已获上千万的访问量

Java 编程 架构 jdk 面试

无敌!阿里巴巴开源落地可实操项目:网约车+咚宝商城+英雄传说

Java~~~

Java 架构 面试 项目 架构师

交易所刷量机器人定制开发,刷k线机器人搭建

量化系统19942438797

交易所 市值机器人

pyhanlp 添加自定义词典(qbit)

qbit

Python nlp 分词

这个 TCP 问题你得懂:Cannot assign requested address

AlwaysBeta

Linux TCP TCP/IP Linux内核 TCP协议

【网络安全】记一次挖洞的日常

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 安全漏洞

阿里P8整理出SQL笔记:收获不止SOL优化抓住SQL的本质,带你领略SQL的世界!

Java MySQL 架构 面试 架构师

CTO离职前悄悄和我说,吃透这5本Java核心技术笔记,涨薪特别简单

Java~~~

Java MySQL spring 架构 面试

TLS协议分析 (七) 安全性分析

OpenIM

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