Animations work in Angular 2, but not in Angular 7

[Harry Whitehouse]

With several days work, I migrated an inherited Angular 2 application to Angular 7. The only feature not working is animation.  

Both in Chrome and Safari, I get the same kind of error message with the Angular 7.4 project.  The Angular 2.4 version performs perfectly.

Error: The animation trigger "carduser" has failed to build due to the following errors:

 - The provided animation property "-ms-transform" is not a supported CSS property for animations

 - The provided animation property "-moz-transform" is not a supported CSS property for animations

 - The provided animation property "-o-transform" is not a supported CSS property for animations

 - The provided animation property "-ms-transform" is not a supported CSS property for animations

 - The provided animation property "-moz-transform" is not a supported CSS property for animations

 - The provided animation property "-o-transform" is not a supported CSS property for animations

Here's the typescript decorator:

animations: [

        trigger('cardphone', [

            state('*', style({

                '-ms-transform': 'translate3D(0px, 0px, 0px)',

                '-webkit-transform': 'translate3D(0px, 0px, 0px)',

                '-moz-transform': 'translate3D(0px, 0px, 0px)',

                '-o-transform':'translate3D(0px, 0px, 0px)',

                transform:'translate3D(0px, 0px, 0px)',

                opacity: 1})),

                transition('void => *', [

                    style({opacity: 0,

                        '-ms-transform': 'translate3D(0px, 150px, 0px)',

                        '-webkit-transform': 'translate3D(0px, 150px, 0px)',

                        '-moz-transform': 'translate3D(0px, 150px, 0px)',

                        '-o-transform':'translate3D(0px, 150px, 0px)',

                        transform:'translate3D(0px, 150px, 0px)',

                    }),

                    animate('0.3s 0s ease-out')

                ])

        ])

    ]

And the HTML

  <div class="col-md-12">

                <div class="card max-width--700" [@cardphone]>

                    <div class="header">

                        <legend>Phone</legend>

                    </div>

                    <div class="content">

                        <!-- Edit -->

                        <div *ngIf="editMode">

                            <edit-phone-cmp

                                (updated)="onUpdated($event)"

                                (cancelled)="onCancelled()"></edit-phone-cmp>

                        </div>

                        <!-- Confirmation -->

                        <div *ngIf="!editMode">

                            <confirm-phone-cmp

                                (changePhone)="onChangePhone()"></confirm-phone-cmp>

                        </div>

                    </div>

                </div>

I gather the Angular 7 project is 'presenting" the animation parameters to the browsers in a different way than the Angular 2 version.  Clearly the browsers can handle this animation as the animation work perfectly in the Angular 2 version.

Can anyone shed light on this problem?

TIA

Harry

[Sander Elias]

Hi Harry,

I suppose you don't have seen this: https://update.angular.io/

Select your old version and your new version. It will generate a list of things you have to attend to. IIRC there is some change in the animations stuff. Not sure it's in there.

This is an article from the creator of the Animator engine: https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html, it will highlight the changes in the engine.

Regards

Sander

[Sander Elias]

Hi Harry,

Did some more checking for you. There is one more issue that might be the culprit. If you are using numeric/boolean states. You might need to change those to strings.

// You might have something like this:
state('1', style({ transform: 'translateY(0)' })),
state('true', style({ transform: 'translateY(0)' })),
// change it to:
state('on', style({ transform: 'translateY(0)' })),

Hope this helps
Regards
Sander

​

[Harry Whitehouse]

I did a bunch of reading on animation (I'm really a newbie here!),the css3 specification and the other links Sander recommended.  

Looking at the code segment below, I see that a "shotgun" approach is used to get a transform accomplished.  The "-ms", "-webkit", "-moz' and "-o" versions refer to different browsers.  Moz = Mozilla Firefox (Duh <g>). 

The last entry is the "default" transform command.  I've found that my Angular 7.2 version of the application does fine on Chrome and Safari if I remark out the -ms, -moz and -o transform lines.  And the animation still works even if I remark out the -webkit line as well

            state('*', style({

                '-ms-transform': 'translate3D(0px, 0px, 0px)',

                '-webkit-transform': 'translate3D(0px, 0px, 0px)',

                '-moz-transform': 'translate3D(0px, 0px, 0px)',

                '-o-transform':'translate3D(0px, 0px, 0px)',

                transform:'translate3D(0px, 0px, 0px)',

                opacity: 1})),

What I still can't figure out is why this code works fine in the Angular 2 version but throws errors like below in Angular 7.2.  Is Angular 7 saying that Browser-specific CSS3 commands are no longer accepted, or that the only browser specific CSS3 commands accepted are those that match the browser the app is running on?

Uncaught (in promise): Error: The animation trigger "cardphone" has failed to build due to the following errors: - The provided animation property "ms-transform" is not a supported CSS property for animations.)

               

I guess my solution is to remark out all the browser-specific commands and go with the default.

[Sander Elias]

Hi Harry,

Well, you don't need to put in any prefixes, the CLI is using postcss, so you don't have to add prefixes anymore and you can just use CSS as it's intended. 

However, it should not fail on prefixes that are there already. 

But yes, when taking out those solve those issues, by all means, go that route, although strictly spoken it shouldn't be needed.

Regards

Sander