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
--
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.
