Standards: CSSTransitionGroup

[hoverduck]

Raised by @adambbecker

Since we're starting to utilize certain animation techniques more and more, one particular use case has arisen that probably should have some of "coding guidelines" thought put into it, the CSSTransitionGroup.

We have a few guidelines already in place for handling some standard CSS/SASS conventions, but since the classes used by CSSTransitionGroup have some established naming conventions of their own (mainly .*-enter / .*-enter-active, etc.) and don't necessary have those classes applied directly to components; we probably should come up with a standardized way of our own.

One idea to start would be something along the lines of:

.*DisplayName*-animation-enter {
  // ... properties about to transition on component entrance

  &.*DisplayName*-animation-enter-active {
    // transition declaration & properties transitioning
  }
}

.*DisplayName*-animation-leave{
  // ... properties about to transition on component exit

  &.*DisplayName*-animation-leave-active {
    // transition declaration & properties transitioning
  }
}

We should prefix the animations. Suggestions:

.a-enter_date-picker--selected {}
.a-enter_date-picker--selected {}
.a-enter-active_date-picker__day--selected {}
.A-enter-active__date-picker--selected {}

.display-name--enter {}
.display-name--enter-active {}
.display-name--leave {}
.display-name--leave-active {}

Could these be done in a way that could be reused? Because then we could wrap ReactCSSTransitionGroup in helper components like TransitionSlide, TransitionBouncyFade, etc.

Which would mean the classes could become:

.transition-bouncy-fade--enter {}
.transition-bouncy-fade--enter-active {}
.transition-bouncy-fade--leave {}
.transition-bouncy-fade--leave-active {}

// defined in "components/transitions/transition-bouncy-fade/style.scss"

In the date-picker transition there doesn't seem to be anything specific style wise to the date picker. But even if there were, we could apply our is-mod principle to build on top of it and do:

// on your component
<TransitionBouncyFade name="my-component__transition">

// on your component style.scss
.my-component__transition.transition-bouncy-fade--enter {
    /* some tweaks */
}

[stale]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week. If you would like it to remain open, can you please comment below and see what you can do to get things moving with this issue? Thanks! 🙏