Styjun

Should I refuse to be named as co-author of a low quality paper?

Strange outlet behavior

Is it safe to remove python 2.7.15rc1 from Ubuntu 18.04?

If there's something that implicates the president why is there then a national security issue? (John Dowd)

What is the reason for setting flaps 1 on the ground at high temperatures?

Should I put programming books I wrote a few years ago on my resume?

Do you have to have figures when playing D&D?

Why isn't Bash trap working if output is redirected to stdout?

Is there a DSLR/mirorless camera with minimal options like a classic, simple SLR?

What should I discuss with my DM prior to my first game?

Why do radiation hardened IC packages often have long leads?

Confused with atmospheric pressure equals plastic balloon’s inner pressure

How to avoid typing 'git' at the begining of every Git command

Latex - unable to get proper boxes

What should I be wary of when insurer is taking a lot of time to decide whether car is repairable or a total loss?

Find the Missing Members of this Powered Sequence

How to write sign "|" (or) in LaTeX?

Rail-to-rail op-amp only reaches 90% of VCC, works sometimes, not everytime

C++ logging library

How precise must a satellite's orbit be?

Extracting data from Plot

So a part of my house disappeared... But not because of a chunk resetting

Can a human be transformed into a Mind Flayer?

Housemarks (superimposed & combined letters, heraldry)

Angular Universal: avoid restarting CSS animations at DOM replacement

Advantage and Implementation of Angular Universal?Angular Universal http server side renderingIs this the correct way to deploy an Angular Universal project when using the Universal-CLI?Convert Angular 4 web app to Angular Universal appAngular Universal does not render all in server sideAngular universal dynamic titleAngular universal only to specific routesAngular Universal does not render data from API RequestsAngular Universal with @ng-toolkit/universalThe dicision boundary between Angular & Angular Universal

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

We have a web-page that starts with some animation: coara

For performance and SEO reasons we normally pre-render our pagees into a static HTML using Angular Universal.

Problem here: The animation re-starts when the DOM is replaced by the Angular code. Is there a way to avoid this, or to wait with DOM replacement until the animation has finished (and not start it again)?

javascript css-animations angular-universal

share|improve this question

asked Mar 24 at 21:40

chris08002chris08002

162112

add a comment | 

1

We have a web-page that starts with some animation: coara

For performance and SEO reasons we normally pre-render our pagees into a static HTML using Angular Universal.

Problem here: The animation re-starts when the DOM is replaced by the Angular code. Is there a way to avoid this, or to wait with DOM replacement until the animation has finished (and not start it again)?

javascript css-animations angular-universal

share|improve this question

asked Mar 24 at 21:40

chris08002chris08002

162112

add a comment | 

We have a web-page that starts with some animation: coara

For performance and SEO reasons we normally pre-render our pagees into a static HTML using Angular Universal.

Problem here: The animation re-starts when the DOM is replaced by the Angular code. Is there a way to avoid this, or to wait with DOM replacement until the animation has finished (and not start it again)?

javascript css-animations angular-universal

share|improve this question

asked Mar 24 at 21:40

chris08002chris08002

162112

share|improve this question

asked Mar 24 at 21:40

chris08002chris08002

162112

share|improve this question

asked Mar 24 at 21:40

chris08002chris08002

162112

asked Mar 24 at 21:40

chris08002chris08002

162112

asked Mar 24 at 21:40

chris08002chris08002

162112

1 Answer
1

active

oldest

votes

1

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
 
 provide: "isBrowser",
 useValue: true,
 ,
 ],

and this import on your app.server.module.ts

 providers: [
 
 provide: "isBrowser",
 useValue: false,
 ,
 ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) 

Now you can disable animations when the component is load on server side and add the animation on client side.

share|improve this answer

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This doesn't solve the following though: Run the animation on the pre-rendered HTML and then not run it again on the client side rendered HTML. Any suggestions for that?
  
  – chris08002
  Mar 25 at 15:40
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328842%2fangular-universal-avoid-restarting-css-animations-at-dom-replacement%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
 
 provide: "isBrowser",
 useValue: true,
 ,
 ],

and this import on your app.server.module.ts

 providers: [
 
 provide: "isBrowser",
 useValue: false,
 ,
 ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) 

Now you can disable animations when the component is load on server side and add the animation on client side.

share|improve this answer

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This doesn't solve the following though: Run the animation on the pre-rendered HTML and then not run it again on the client side rendered HTML. Any suggestions for that?
  
  – chris08002
  Mar 25 at 15:40
  

  
  
  
  

add a comment | 

1

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
 
 provide: "isBrowser",
 useValue: true,
 ,
 ],

and this import on your app.server.module.ts

 providers: [
 
 provide: "isBrowser",
 useValue: false,
 ,
 ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) 

Now you can disable animations when the component is load on server side and add the animation on client side.

share|improve this answer

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This doesn't solve the following though: Run the animation on the pre-rendered HTML and then not run it again on the client side rendered HTML. Any suggestions for that?
  
  – chris08002
  Mar 25 at 15:40
  

  
  
  
  

add a comment | 

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
 
 provide: "isBrowser",
 useValue: true,
 ,
 ],

and this import on your app.server.module.ts

 providers: [
 
 provide: "isBrowser",
 useValue: false,
 ,
 ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) 

Now you can disable animations when the component is load on server side and add the animation on client side.

share|improve this answer

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

 providers: [
 
 provide: "isBrowser",
 useValue: true,
 ,
 ],

 providers: [
 
 provide: "isBrowser",
 useValue: false,
 ,
 ],

constructor(@Inject("isBrowser") public enableAnimations: boolean) 

share|improve this answer

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111

answered Mar 25 at 7:21

Miquel Ferrer LlompartMiquel Ferrer Llompart

111