Animation directives

[AntJanus]

Animation directives that automatically animate an element in/out without the need for specific logic for every directive. Hoping I can use it to override the activation mechanism within regular directives, highjack it, and animate to different states.

[AntJanus]

@gakimball I've written a pretty neat animate service that lives under the foundationApi (I might move it, not sure) but it has two methods:

1. animate - which works VERY similarly to how our view animation works
2. toggleAnimate - which works how our element animation works -> by toggling the active class

I'm hoping to use these two methods to replace how animation works on the elements we discussed: panel, offcanvas, and notification. However, I can't append any extra animation information to these elements since these elements have built-in animation (.panel.is-active for instance). I'd love to get these out of the standard definition and into the service I've written.

So, for instance for panel, I could write in the directive definition that slideFromLeft (or wherever) is the default animation and to use toggleAnimation to activated it or deactivate it. If the user declares both animationIn and animationOut, we'd use that animation instead.

What do you think?

EDIT And we could add this logic to any element that uses foundationApi (most directives) and allow these options. It's a 4-5 liner in terms of directive logic.

[ilanbiala]

Is this using rAF, web animations, pure JS, or something else?

[AntJanus]

@ilanbiala angular and the foundation structure to trigger animation. Plain JS and Angular's built-in features to add and remove CSS classes, do resets, and reflows. And finally, CSS transformations for the animation itself.

[ilanbiala]

Ah okay. Are these for the motion-ui? How would someone add to the set of pre-existing animations? Is it just add the animation to a CSS file, and add the data-motion attribute wherever?

[gakimball]

@ilanbiala The animations will follow the format prescribed by Angular's animation module, where transitions are structured like this:

.transitionName {
  &.ng-enter {
    // Before state
    &.ng-enter-active {
      // After state
    }
  }
}

Our transition mixins will allow you to create animations with more nuance, by adjusting direction, origin, timing, and so on.

.customTransition {
  @include slide($args...);
}

But if you want to write your own totally different transitions, they'll work as long as they use the ng- classes.

[ilanbiala]

Sounds good!

[AntJanus]

@gakimball this is pretty much ready to go. I'll fix the merge conflicts and we can get this into master! :)

[gakimball]

👍

[ilanbiala]

Cool, will this fix/make working the motion-ui on the docs?