Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat($animateCss): add support for temporary styles via cleanupStyles #12930

Closed
wants to merge 1 commit into from

Conversation

matsko
Copy link
Contributor

@matsko matsko commented Sep 24, 2015

Some animations make use of the from and to styling only for the
lifetime of the animation. This patch allows for those styles to be
removed once the animation is closed automatically within $animateCss.


This demo showcases a clear need for this feature:
http://plnkr.co/edit/uuTz4eudDvKgspOowEPm?p=preview

Notice how we need to do cleanup work once the animation is complete by removing the height property:

$animateCss(element, {
  from: { height: '0px' },
  to: { height: height + 'px' }
}).start().done(function() {
  element[0].style.removeProperty('height');
  done();
});

With this new feature we could turn the code above into this:

$animateCss(element, {
  cleanupStyles: true
  from: { height: '0px' },
  to: { height: height + 'px' }
});

@matsko matsko added this to the 1.5.0-beta.1 milestone Sep 24, 2015
Some animations make use of the `from` and `to` styling only for the
lifetime of the animation. This patch allows for those styles to be
removed once the animation is closed automatically within `$animateCss`.
@matsko matsko force-pushed the animate_css_cleanup_styles branch from 310bff5 to c2ceb89 Compare September 24, 2015 00:56
@@ -204,6 +204,7 @@ var ANIMATE_TIMER_KEY = '$$animateCss';
* * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a
* * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
* * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occuring on the classes being added and removed.)
* * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once the animation is closed. This is useful for when the styles are used purely for the sake of the animation and do not have a lasting visual effect on the element (e.g. a colapse and open animation). By default this value is set to `false`.
Copy link
Member

Choose a reason for hiding this comment

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

Too long lines :(

@petebacondarwin
Copy link
Contributor

This LGTM in general. I wonder if a next step could be to refine the cleanupStyles option to take a hash that would let you be more fine grained about what styles are temporary and what are permanent or is that never going to be needed?

@matsko
Copy link
Contributor Author

matsko commented Sep 24, 2015

@petebacondarwin I can see a use for that, but I don't want to bloat the API too much. Is there an animation that you can think of where this would be useful?

@IgorMinar
Copy link
Contributor

let's keep the api simple for now. we can always expand it later via optional hashValue.

assuming all the other comments are resolved, this looks good to me

@matsko matsko closed this in 9f67da6 Sep 24, 2015
@matsko matsko deleted the animate_css_cleanup_styles branch September 24, 2015 17:02
matsko added a commit that referenced this pull request Sep 24, 2015
Some animations make use of the `from` and `to` styling only for the
lifetime of the animation. This patch allows for those styles to be
removed once the animation is closed automatically within `$animateCss`.

Closes #12930
@matsko
Copy link
Contributor Author

matsko commented Sep 24, 2015

Landed as e52d731 for 1.4.x and 9f67da6 for 1.5.x.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants