Transitions fail to appear correctly when the page first loads

Question

Transitions fail to appear correctly when the page first loads

I need to fill a gauge meter based on a variable sent to the html file. To achieve this, I have initially set the value to zero:

  transform:rotate(.0turn);
  transition: all 1.3s ease-in-out;

However, when the HTML is first loaded or refreshed (with F5), it triggers a strange animation that I want to prevent. Interestingly, when I navigate to a different section using the side-nav and then return, the animation displays smoothly as expected.

[ngStyle]="{ 'transform': 'rotate(' + dashService.valor_radio + 'turn)' }">

This code snippet is responsible for passing the value from the HTML page to the CSS file. Most of the resources I find online address how to avoid transitions during initial page load, but my focus is on avoiding unexpected animations at that moment. Please note that I am unable to utilize jQuery for this task.

html css angular

Answer 1

Answer №1

Upon initial observation, the slight stutter in the animations may be attributed to a high level of activity occurring during the loading process, particularly if it is within a lazily loaded module.

To potentially address this issue, consider integrating a brief delay within the animation:

transition: all 1.3s 100ms ease-in-out;
                      ^ delay

Additionally, if the width and/or height of the container are being animated whilst constructing the DOM, experiment with altering transition: all to a more specific attribute such as transition: transform

Answer 2

Upon initial observation, the slight stutter in the animations may be attributed to a high level of activity occurring during the loading process, particularly if it is within a lazily loaded module.

To potentially address this issue, consider integrating a brief delay within the animation:

transition: all 1.3s 100ms ease-in-out;
                      ^ delay

Additionally, if the width and/or height of the container are being animated whilst constructing the DOM, experiment with altering transition: all to a more specific attribute such as transition: transform

Answer 3

Answer №2

RESOLUTION: I discovered that including 'all' after the transition keyword caused all my parameters to transition, rather than just 'transform:rotate'. It was a simple fix - I switched out 'transition: all' for 'transition: transform'

Answer 4

RESOLUTION: I discovered that including 'all' after the transition keyword caused all my parameters to transition, rather than just 'transform:rotate'. It was a simple fix - I switched out 'transition: all' for 'transition: transform'

Transitions fail to appear correctly when the page first loads

Answer №1

Answer №2

Similar questions

Best practices for arranging several divs with CSS

Challenges with adjusting the value of HTML range inputs

Design featuring a combination of vertical columns and a fixed image placed in

Interactive Sidebar Navigation Content

What is the best way to make a block fill 100% of a container-fluid?

When applying styles in Polymer, it's important to take into account the width and height

Preserve data during page refresh with the power of RxJS

Conceal four input fields depending on the option chosen from the dropdown menu

Using canvas in Bootstrap can lead to columns wrapping onto the next line due to margins

Integrating custom non-NPM JavaScript files into Angular 2

Python Ordering menu items for the Pelican restaurant

Unable to apply background-color CSS in playwright is not working as expected

Don't forget to save the selected tab in Angular 5 using a bootstrap tabset

Issues with JQuery Ajax rendering in browser (suspected)

Is there a way to display a loader when an item is selected from a dropdown menu? For example, while data is being fetched from the backend, can we

I'm facing a challenge with getting the 'extend' feature to function correctly while using Flask in Python

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

Changing the class of a div in JavaScript from one class to another

Is it possible to create two header columns for the same column within a Material UI table design?

How can I dynamically retrieve the width of an image in React as the screen size changes?