.animate mixin?

[lougreenwood]

Hi,

I'm trying to use the library to assign animation to certain classes by default, for example, I want a specific animation to be applied to all modals.

However, I'm trying to avoid the needs to add 'animate pulse' to the markup anywhere a modal is displayed. One solution to this is to @extend .animate class in my modal class, however, we all know that @extend has issues and @mixin is preferred.

Is there any existing mixing to include the .animate rules in arbitrary sass classes, if not, would you accept a PR where _base defines an animate main and .animate class in base uses this mixing?

Thanks!

[dennis-f]

I'd appreciate that.

[tgdev]

Hi @lougreenwood,

Apologies for the delayed response.

That seems like a decent solution. I would just warn that by using mixins this way you're bloating your css output (always look at the output when using sass).

Let's say you end up using the mixin across 4 separate modules including the base .animate class.

Your output css is going to have 4 sets of the same css rules duplicated for each of those separate css classes.

I'm more a fan of using the modular class chaining approach in my markup but it's just that, a preference.

If you feel like this offers users of this library greater flexibility then I have no issue with you submitting a pull request with the proposed changes.

You can use the existing helpers/_mixins.scss file to declare the new mixin rule and just include it in the .animate class in _base.scss.

Thanks for your input :-)

[tgdev]

Hey @lougreenwood ,

Turns out @carlos-avila has submitted a custom mixin PR here: #27

If this is what you're looking for then I'd be happy to review it and merge it in (updating the docs also)

Let me know what you think.

[lougreenwood]

hey @tgdev sorry for the even longer delayed response :)

I just took a look at the PR, it does look very useful, but for some of my use cases, I need to apply a different animation class on open close (pulse open, fadeOut closed). This PR won't work in that scenario because it seems that the class fadeOut gets ignored, but that's no big deal.

I've added a single comment to the PR, just pointing out that base-duration is compatible with CSS custom properties (just like #34), otherwise looks good and useful for me.

Back to the main topic of this issue, I'm currently using a hacky homebrew mixin for setting the .animate class, I'll try and clean it up and send a PR when I have some time.

Cheers!