写点什么

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

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

关注

评论

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

《几何代数计算入门(计算机视觉)》

计算机与AI

计算机视觉 计算机图形学

我是收藏一把好手

yes

学习

数万人跪求!阿里P8大牛手写的《Java程序性能优化实战笔记》,GitHub标星已高达十万!

Java架构之路

Java 程序员 架构 面试 编程语言

「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单设计器(五)

crudapi

Vue crud 动态表单 quasar cruapi

MapReduce优化

大数据技术指南

hadoop 4月日更

OpenHarmony 1.1.0 LTS 版本正式发布

开放原子开源基金会

开源 开放原子开源基金会 OpenHarmony

flutter开发环境搭建,京东面试真题解析,分享PDF高清版

欢喜学安卓

android 程序员 面试 移动开发

framework源码,Android学习路线指南,已整理成文档

欢喜学安卓

android 程序员 面试 移动开发

别当工具人了,手摸手教会你 Jenkins ! 码农很低调

比伯

Java 程序员 架构 计算机 技术宅

和老大的相爱相杀中,让我终于搞懂了函数式接口

麦洛

Java 函数式接口 Lambda java8

NA(Nirvana)Chain“以应用而生”如何强势突围

区块链第一资讯

用OpenCV制作庆祝武汉重启一周年短视频

老猿Python

Python OpenCV 音视频 图形图像处理 引航计划

读《非暴力沟通》

箭上有毒

读书笔记 4月日更

【资深猎头分享】程序员面试如何避坑?

Java架构师迁哥

如何从Telegram下载一整套可爱的猫猫表情包?

彭宏豪95

GitHub 效率 社交 4月日更

你看起来很美味?独家揭露视频推荐系统AI秘方

白洞计划

DEX领域第一个运用整合思维的DeFi协议 SumSwwap潜力巨大

币圈资讯

Java高手是怎样炼成的?阿里P8技术大牛这份手写笔记告诉你答案!

Java架构之路

Java 程序员 架构 面试 编程语言

Dubbo 学习笔记(一) Hello,Dubbo

U2647

dubbo 4月日更

刚刚!字节跳动发布了 1179 个 Java 岗,平均薪资40K

钟奕礼

Java 编程 程序员 架构 面试

一篇文章告诉你什么是EGG Network(阿凡提)以及什么是EFTalk

币圈那点事

HBase三个重要机制

五分钟学大数据

HBase 4月日更

某招聘平台流出一套超级全面的《Java面试题总结》被疯狂转发近百万次,已助我拿下5个大厂offer。

Java架构之路

Java 程序员 架构 面试 编程语言

区块链技术驱动商业银行开展供应链金融业务的创新路径

CECBC

Linux mkdir 命令

一个大红包

4月日更

redis Redis缓存穿透解决方案

Sakura

4月日更

Boss直聘转发超120W次Java全栈面试题!已帮我拿下5个Offer!

Java架构追梦

Java 面试 架构师 阿里巴巴面经总结

火爆火爆!最新分享给大家:Boss直聘转发超80W次的一套超全面试题总结

比伯

Java 架构 面试 程序人生 计算机

211本科面试阿里挂了:分布式+限流+通讯+数据库被问懵了!

码农之家

Java 编程 程序员 面试 刷题笔记

In-depth Java synchronized

0xABC

Java并发 并发编程 Monitor

C++ 虚函数表剖析

赖猫

c++ C/C++ 封装、继承、多态

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