1

On my angular 4 project I have added animation in a css file and added classes on elements to apply animation on page load, right now its not working on first page load and app takes time to load and css applies in between, once the page is loaded fully then they are working fine but I want them on first page load.

One solution is to load animation file after app load, but not sure how can I do it.

Second way is to use javascript to add classes on page load but then it will take time and requires code for different components.

Is there a way to do it ?

Any help is appreciable.

Improve this question

1 Answer 1

Reset to default
3

You can also add the styles directly in index.html inside <style> tag or directly on the element tag as inline style. So the styles would be loaded before the page is fully loaded and so can be applied ahead.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks @Vega, its way more better than the previous and I can see the animations but still need to find a way to load style file after page load, may be I can inject them using typescript but not sure about method.
Do you wish to load an other stylesheet after the load or the same? Isn't it already loaded, why relaod? how about app component stylesheet ?
Yes I have couple of stylesheets for different purposes and I can not bound them in a single component and they are used in multiple so trying to load them based on conditions after app load.
If you use angular cli, you can add all the stylesheets to "styles": [] list and they will be bundled
I maybe misunderstood the last comment, but can you use stylesUrls[] with multiple stylesheets on the component?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.