Closed pablopandolfi closed 5 years ago
There is also a problem in IE that ng-component
s aren't removed when routing animation is done. Thus, all ng-componet
s stay in the DOM even if we left the route.
Not sure if a separate ticket should be created for that.
We had a similar problem as in the first post, solved it by adding this to our polyfills:
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}
Hi, I have tested using https://stackblitz.com/edit/angular-grryts (link added in the bug description), but i wont able to resolve the problem. Could you try to test with the link? thanks
Hey. Yeah, you're right, it doesn't solve the actual animation. We probably had a different bug where the animation would throw an error in IE11 if if we didn't add the polyfill. Sorry.
Hi, someone has a workaround that can help to me ? Or some other solution that i can use for implementing the same animation ? thanks
There is also a problem in IE that
ng-component
s aren't removed when routing animation is done. Thus, allng-componet
s stay in the DOM even if we left the route. Not sure if a separate ticket should be created for that.
@opetriienko Is there an issue open for this? I can't find one and am experiencing the same.
There is also a problem in IE that
ng-component
s aren't removed when routing animation is done. Thus, allng-componet
s stay in the DOM even if we left the route. Not sure if a separate ticket should be created for that.@opetriienko Is there an issue open for this? I can't find one and am experiencing the same.
Same here. I've tried all the proposed solutions and I'm having this with routing transitions.
@jackmusick After what feels like a lifetime of debugging, I know what was causing this for me so maybe it will help you.
I have dynamic components in my template that I don't want to be removed from the DOM while the page is being navigated away from (it looks weird). In order to prevent them from being hidden, I added a block to my animation that look like this:
query(':leave ng-component', [animate('1.5s')], {optional: true})
This worked in all browsers besides IE. So I dug into the code. Because IE requires polyfilling, it uses CssKeyFrames instead of WebAnimations. CssKeyFrames generates CSS for my code that looks like this:
@keyframes gen_css_kf_1 {
0% {}
100%{}
}
Angular is relying on the animationend event to remove elements from the DOM. IE never triggers the animation end event when there are no animatable properties in the block (for instance: display block -> display block also does not trigger the animationend event).
Until Angular puts in a fix, I have resolved this by adding animatable properties to my ng-component query:
query(`:leave ng-component`, [animate('1.5s', style({ transform: 'translateY(0%)' }))], { optional: true })
@willyboy I tried what you suggested and I don't think it helped. Here's what I'm using for my router transition:
export const RouterAnimation = trigger('routerTransition', [
transition('* => *', [
// Initial state of new route
query(':enter',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(-100%)'
}),
{ optional: true }),
// move page off screen right on leave
query(':leave',
animate('200ms ease',
style({
position: 'fixed',
width: '100%',
transform: 'translateX(100%)'
})
),
{ optional: true }),
// move page in screen from left to right
query(':enter',
animate('200ms ease',
style({
opacity: 0.10,
transform: 'translateX(0%)'
})
),
{ optional: true }),
query(':enter', animateChild(), { optional: true }),
])
]);
I can't say I understand Angular Animations fully, but I will say that this worked in Angular 5. The intended result is to fade and transition the main content in the router, left to right. This works fine in Chrome, but in IE and Edge, it leaves the object on the screen and the incoming route is left faded a little on the left. If I navigate back to the previous route, it's appended to the top of the screen, effectively creating two components.
This was a surprise for me to upgrade from angular 4 with purposely no animation polyfill to angular 6.
I did not include it because it was not rendering well on IE., but now that the polyfill is not needed, my app on IE is a disaster with broken animation and components not being destroyed.
This is an important regression.
I was able to fix the "Object doesn't support property or method 'matches'" error in Internet Explorer by setting node: {process: false}
in my Webpack config. See https://github.com/angular/angular/issues/24769#issuecomment-405498008.
@theodorejb It worked for me as well. After upgrading Angular project from 5 to 6, I started started having this issue on IE11.
@theodorejb @madhav5589 Are either of you using the CLI? I'm still not sure how I customize webpack if I'm using it.
@jackmusick No, I don't use CLI. I updated webpack.config.js directly.
@jackmusick I'm not using the CLI, either. My understanding is that the CLI is supposed to take care of setting up the Webpack config correctly, though. If the Angular team considers disabling Webpack's node process option to be the correct solution, then I would expect the CLI to do this out-of-the-box.
Try adding the keyframes
function like this. Works for me:
export const slideInOutAnimation =
trigger('slideInOutAnimation', [
state('*', style({
position: 'fixed',
zIndex: 6,
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)'
})),
transition(':enter', [
style({
right: '-400%',
backgroundColor: 'rgba(0, 0, 0, 0)'
}),
animate('.5s ease-in-out', keyframes([
style({
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)'
})
]))
]),
transition(':leave', [
animate('.5s ease-in-out', keyframes([
style({
right: '-400%',
backgroundColor: 'rgba(0, 0, 0, 0)'
})
]))
])
]);
Hi, on our side, everything is working in IE11 up to animations@7.2.7. From 7.2.8 declared animations do not work anymore in IE.
Our usage:
trigger('isVisibleChanged', [ \ state('true', style({opacity: 1, display: 'block'})), state('false', style({opacity: 0, display: 'none'})), transition('1 => 0', animate('900ms')), transition('0 => 1', animate('900ms')) ])
And in the template: <div [@isVisibleChanged]="documents.content.length > 0">
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
I'm submitting a...
Current behavior
I have the following animation in Angular 6.
When I want to use the animation in a Component:
In parent-component.html I have the html
In the parentcomponent I have a link to add a element. When the user click in the link. The content of examplecomponent is loaded using the animation. In chrome is working perfect. But in Internet Explorer the animation is not working. Also, the animation is working perfect using Angular5 in Chrome and IE. The problem is when i want to use it with Angular 6.
This is my package.json file
polyfills.ts
In Angular5 is working perfect in all browsers, but when I want to migrate to Angular6 i have problems with IE. No errors in IE console.
Minimal reproduction of the problem with instructions
You can reproduce the problem in the following link: https://stackblitz.com/edit/angular-grryts