element.animate()
The forthcoming Web Animations JavaScript API lets you animate web content from script. The element.animate() function included in today’s Beta is the first part of the API to ship in Chrome: it makes it possible to create simple CSS Animations using JavaScript. This means that animations can be dynamically generated without paying a CSS style recalculation cost. Animations created in this way are also cancelable and provide guaranteed end events (in contrast, CSS Transitions only generate events if they cause a style change). Here's an example of how you'd use it:
elem.animate([
{transform: 'translateX(0px)'},
{transform: 'translateX(100px)'}
], 3000);HTML Imports
HTML Imports, part of the Web Components standards umbrella, offer a way to include HTML documents in other HTML documents using
<link rel="import">:<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>Data-binding with Object.observe()
Object.observe() lets you observe changes to JavaScript objects. You can define a callback that observes multiple objects and will receive all changes to any objects in a single asynchronous call. This is especially useful for framework authors implementing data-binding.
// Let's say we have a model with data
var model = {};
// Which we then observe
Object.observe(model, function(changes) {
// This asynchronous callback runs and aggregates changes
changes.forEach(function(change) {
// Letting us know what changed
console.log(change.type, change.name, change.oldValue);
});
});Other updates in this release
- Chrome no longer sends touchcancel on touch scroll, improving compatibility with other browsers and making it possible to add touch UI effects like pull-to-refresh without re-implementing scrolling and fling physics in JavaScript.
- Some CSS properties such as scrollTop and offsetHeight will now return fractional values in browser-zoom situations.
- The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).
- DevTools now faithfully emulates touch with mouse, allowing you to test touch interactions on Chrome for Android using the mobile emulation feature of DevTools.
- Unprefixed CSS Transforms enables rich web content by allowing elements to be transformed in two-dimensional or three-dimensional space.
- The will-change property allows developers to give a hint about which properties are about to change, which can help reduce delays at the beginning of animations in some cases.
Posted by Shane Stephens and Doug Stockwell, Animated Software Engineers