Hello guys,
I have a project which has an angular component nested in a main html file.
The main html file has angular tab menu (created using *ngIf) and the component html file has CSS3 animation which can to be triggered by a start button.
Problem: I can start the animation using the start button but when I navigate to other tab menu div in main html, the CSS3 animation on component automatically stops. It needs to triggered again from start using the button.
In this project, I have to keep animation going even when the component is in background.
How can I do that? I’m sure this is an angular related issue… and I’m guessing there must be a way to keep component page running in background even when it’s hidden from display.
Thanks in advance.
Non-view items, like Observable subscriptions, remain active. But if your animation is no longer part of the DOM, it probably can’t continue to update. Do you really need something purely visual to keep running even when it’s invisible? Doesn’t sound performant. If all you need is to remember where the animation left off, you can handle that with ionViewWillLeave and ionViewWillEnter.
1 Like
The CSS3 animation should be running because it shows progress of media playback in real time so if it turns off then it’s going to confuse users.
Users should be able to see animation when they come back to the component page so the component should be running CSS3 animation even when it is hidden from display…
Do you think Angular animation will not come with this problem? Maybe I will try to switch to Angular animation and see how it behaves. I’m not sure if it will automatically stop animation when target component is hidden.
Things get a lot more complicated as I make app’s contents more dynamic.
Any opinion would be appreciated… this is likely the last problem I have to solve in order to complete programming of the app I’m working on.
Let’s say it’s a progress bar of a file upload. The upload can proceed even if you’re on another page. Might be bad user experience because it might be confusing, but there are nonconfusing ways to do this kind of thing and the general idea is pretty standard. You try to upload an image, the internet is down, so you try again later without telling the user. That’s built into Firebase for example.
But you don’t need to draw the progress bar if you can’t see it. Rather, keep track of how much upload progress has been made. Then if you ever have to render the progress bar again, render it with the new data.
1 Like
Thanks for your response. The scenario is very different from this… the animation has to go on and display correct value when a user comes back to the component page.
For instance, I have a movie playback. And it has a progress bar. This movie should be playing even when I’m navigating subtitle info page. And its progress bar should also progress along with movie so if a user comes back to movie component page, they will be displaying correct value.
I did something like this with CSS3 but it automatically stops as soon as component becomes invisible.
Any idea? I will try angular animation tomorrow and see what happens…
other person recommended Angular Cache… https://docs.angularjs.org/api/ng/service/$cacheFactory
However this one’s for angularJS … not for v5.
How would caching help?
Isn’t the progress coming from some sort of provider or something, so that when the component comes back it’s using the latest value?
Perhaps I’m just not understanding what’s going on here.
1 Like
Yeah, probably not. I’m just trying to keep CSS3 animation going in the background while component which has the animation is not visible.
I will try angular animations and Green Sock Animation Platforms and see how they behave compared to CSS3 animations.
If there’s other way, please let me know. CSS3 animation seems to disappear as soon as its containing component is hidden from display.
Well, I just tried Angular Animations instead of CSS3 and the result is the same.
When the component is hidden from display, it loses animation.