Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at the New York ColdFusion User Group (Jan. 2010) with: Jorge Hassan and Steven Benjamin
Ben Nadel at the New York ColdFusion User Group (Jan. 2010) with: Jorge Hassan and Steven Benjamin

Automatic Property Calculation Support With Animations In Angular 2 RC 6

By Ben Nadel on

One of the cool things about the Web Animations support in Angular 2 RC 6 is that you can use the "*" (wildcard) to reference the "runtime value" of a given property in either the source or destination styles of a transition. As I've been playing around with this feature, however, I've discovered that the support for this varies from browser to browser; and, also depends on whether or not you're using the Web Animations polyfill. So, moral of the story - be sure to test your animations and automatic property calculations across browsers.


 
 
 

 
 
 
 
 

Run this demo in my JavaScript Demos project on GitHub.

To demonstrate, I have a box that I can transition to and from the "void" state. In these transitions, I try to make use of:

  • width: "*"
  • height: "*"
  • borderRadius: "*"

In Chrome - which has native Web Animations support - and Sarafi - which uses the Web Animations polyfill - all three of these automatic property calculations work fine. In Firefox, however - which has native Web Animations support - height and width work but the borderRadius throws an error:

Animation to or from an underlying value is not yet supported.

I don't know if there's a list somewhere of the supported properties - these are just the few that I've tried to use in my research. Here's the demo code:

  • // Import the core angular services.
  • import { animate } from "@angular/core";
  • import { Component } from "@angular/core";
  • import { state } from "@angular/core";
  • import { style } from "@angular/core";
  • import { transition } from "@angular/core";
  • import { trigger } from "@angular/core";
  •  
  • @Component({
  • selector: "my-app",
  • animations: [
  • trigger(
  • "boxAnimation",
  • [
  • // When transitioning to and from a given state, we can SOMETIMES use
  • // the "*" to leverage whatever the existing runtime value is (or should
  • // be) for the given property. Support for this depends on the browser.
  • // For example, in Chrome, we can use borderRadius:"*"; but, in Firefox,
  • // it will throw the error:
  • // --
  • // Animation to or from an underlying value is not yet supported.
  • // --
  • // Both Chrome and Firefox support width:"*" and height:"*".
  • transition(
  • "void => *",
  • [
  • style({
  • height: 0,
  • width: 0
  • }),
  • animate(
  • "1000ms ease-in-out",
  • style({
  • height: "*",
  • width: "*"
  • })
  • )
  • ]
  • ),
  • transition(
  • "* => void",
  • [
  • style({
  • borderRadius: "*",
  • height: "*",
  • width: "*"
  • }),
  • animate(
  • "1000ms ease-in-out",
  • style({
  • borderRadius: 0,
  • height: 0,
  • width: 0
  • })
  • )
  • ]
  • )
  • ]
  • )
  • ],
  • template:
  • `
  • <p>
  • <a (click)="toggleBox()">Toggle Box</a>
  • </p>
  •  
  • <div *ngIf="isShowingBox" @boxAnimation class="box">
  • <br />
  • </div>
  • `
  • })
  • export class AppComponent {
  •  
  • public isShowingBox: boolean;
  •  
  •  
  • // I initialize the component.
  • constructor() {
  •  
  • this.isShowingBox = false;
  •  
  • }
  •  
  •  
  • // ---
  • // PUBLIC METHODS.
  • // ---
  •  
  •  
  • // I show or hide the box depending on the current state.
  • public toggleBox() : void {
  •  
  • this.isShowingBox = ! this.isShowingBox;
  •  
  • }
  •  
  • }

When executing the "enter" transition, I'm only using "height" and "width"; so, these should work in all the browsers. But, when executing the "leave" transition, I'm also using "borderRadius", which will break in Firefox:


 
 
 

 
 Automatic property calculation support in Angular 2 RC 6 web animations need to be tested across browsers. 
 
 
 

The automatic property calculation feature in Angular 2 RC 6 is very awesome and is something that I'm excited to dig into more. The take-away of this post is simply that browser support varies and that you need to remember to test your animations across browsers - even when the browser has native Web Animations support.




Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.