限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

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

关注

评论

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

EMQX+阿里云Tablestore多场景一站式IoT数据解决方案正式发布

EMQ映云科技

阿里云 物联网 一站式平台 emqx 5月月更

昆仑数据库可定制的数据分片方案

KunlunBase昆仑数据库

国产数据库

昆仑分布式数据库系统简介 之 SQL 标准兼容性和日常维护工作

KunlunBase昆仑数据库

国产数据库

烧录OpenHarmony 3.2(尝鲜版)步骤

离北况归

OpenHarmony OpenHarmony3.2

谈谈技术能力

阿里巴巴中间件

阿里云 程序员 中间件 技术思考

满满干货!手把手教你实现基于eTS的HarmonyOS分布式计算器

HarmonyOS开发者

HarmonyOS ETS

SaaS应用:企业数字化转型性价比最高的方式

小炮

KunlunBase 查询优化(一)

KunlunBase昆仑数据库

MySQL 数据库 国产数据库

2022第八届华为软件精英挑战赛全球总决赛圆满落幕,冠军奖金20万!

科技热闻

火山引擎A/B测试私有化实践

字节跳动数据平台

实验 火山引擎 私有化部署 ab测试

2022年中国消费金融数字化发展分析

易观分析

消费金融

微擎同步粉丝不显示头像和昵称?

智伍应用

微擎 php开源

【二级等保】二级等保怎么做?价格怎么样?贵吗?

行云管家

运维 网络安全 堡垒机 运维审计

深入解读SQL的聚集函数

华为云开发者联盟

sql GaussDB(DWS) 聚集操作 主键列

关于加密通道规范,你真正用的是TLS,而非SSL

华为云开发者联盟

TLS 加密 ssl 加密通道 CA系统

数据库系统最佳实践系列 --- 使用 prepared statement

KunlunBase昆仑数据库

国产数据库

手绘图解java类加载原理

华为云开发者联盟

Java 类加载 元数据 类静态

数据库堡垒机品牌有哪些?买哪家划算?咨询电话多少?

行云管家

网络安全 信息安全 数据安全 堡垒机

什么是显卡?GPU服务器到底有什么作用?

Finovy Cloud

gpu GPU服务器

【LeetCode】调整数组顺序使奇数位于偶数前面Java题解

Albert

LeetCode 5月月更

文档管理:企业进步的重要因素

小炮

文档管理

netty系列之:epoll传输协议详解

程序那些事

Java Netty 程序那些事 5月月更

小程序转APP,小团队也能实现数字化生态闭环

Speedoooo

APP开发 跨端开发 小程序容器 小程序转app 跨端运行

三分钟让你了解 vue 中的父子通讯

CRMEB

KunlunBase 查询优化(二)Project 和 Filter 下推

KunlunBase昆仑数据库

国产数据库

MySQL-8.0 Group Replication 研究与改造汇总

KunlunBase昆仑数据库

国产数据库 MySQL 数据库

昆仑分布式数据库Sequence功能及其实现机制

KunlunBase昆仑数据库

国产数据库

AI简报-FIX你的模型

AIWeker

人工智能 深度学习 5月月更 AI简报

leetcode 451. Sort Characters By Frequency 根据字符出现频率排序

okokabcd

LeetCode 排序

KunlunBase 查询优化(三)排序下推

KunlunBase昆仑数据库

国产数据库

《阿里云代码安全白皮书》5个维度应对3类代码安全问题

阿里云云效

云计算 阿里云 代码管理 代码托管 代码安全

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