Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(progressCircular): SVG transforms for indeterminate mode and performance improvements #7414

Closed
wants to merge 1 commit into from

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Mar 4, 2016

  • Avoids unnecessary digest cycles during the indeterminate animation by using setInterval, instead of $interval.
  • Avoids creating multiple Date objects by using the performance API and the timestamp from $$rAF.
  • Avoids unnecessary DOM manipulation and layout by only setting the element dimensions when the diameter changes.
  • Avoids unnecessary layout by pulling the SVG element out of the flow.
  • Fixes wobble in indeterminate animation on IE by switching to animating the SVG transform attribute. Below is an example of the wobble (left is CSS rotation, right is SVG):
    ffs

element.addClass('ng-hide');
} else {
element.removeClass('ng-hide');

if (mode === MODE_INDETERMINATE){
if (!interval) {
interval = $interval(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, you said, that you wan't to stop the digests for $interval. I would rather use

$interval(fn, delay, 0, false);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, I'll put it back in.

…inate

circle rotation and apply some performance optimizations
@devversion devversion added the needs: review This PR is waiting on review from the team label Mar 4, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: review This PR is waiting on review from the team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants