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.
On Monday, February 18, 2019 at 9:55:36 PM UTC-8, Sander Elias wrote:
>
> 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
>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
