feat(Transition): allow custom animations

src/modules/Transition/Transition.d.ts

@@ -11,11 +11,14 @@ export interface TransitionProps extends StrictTransitionProps {
 
 export interface StrictTransitionProps {
   /** Named animation event to used. Must be defined in CSS. */
-  animation?: SemanticTRANSITIONS
+  animation?: SemanticTRANSITIONS | string
 
   /** Primary content. */
   children?: React.ReactNode
 
+  /** Whether it is directional animation event or not. Use it only for custom transitions. */
+  directional?: boolean
+
   /** Duration of the CSS transition animation in milliseconds. */
   duration?: number | string | TransitionPropDuration
 

src/modules/Transition/Transition.js

@@ -19,11 +19,14 @@ const TRANSITION_TYPE = {
 export default class Transition extends Component {
   static propTypes = {
     /** Named animation event to used. Must be defined in CSS. */
-    animation: PropTypes.oneOf(SUI.TRANSITIONS),
+    animation: PropTypes.oneOfType([PropTypes.oneOf(SUI.TRANSITIONS), PropTypes.string]),
 
     /** Primary content. */
     children: PropTypes.element.isRequired,
 
+    /** Whether it is directional animation event or not. Use it only for custom transitions. */
+    directional: PropTypes.bool,
+
     /** Duration of the CSS transition animation in milliseconds. */
     duration: PropTypes.oneOfType([
       PropTypes.number,
@@ -188,13 +191,13 @@ export default class Transition extends Component {
   // ----------------------------------------
 
   computeClasses = () => {
-    const { animation, children } = this.props
+    const { animation, directional, children } = this.props
     const { animating, status } = this.state
 
     const childClasses = _.get(children, 'props.className')
-    const directional = _.includes(SUI.DIRECTIONAL_TRANSITIONS, animation)
+    const isDirectional = _.isNil(directional) ? _.includes(SUI.DIRECTIONAL_TRANSITIONS, animation) : directional
 
-    if (directional) {
+    if (isDirectional) {
       return cx(
         animation,
         childClasses,

src/modules/Transition/TransitionGroup.d.ts

@@ -12,11 +12,14 @@ export interface StrictTransitionGroupProps {
   as?: any
 
   /** Named animation event to used. Must be defined in CSS. */
-  animation?: SemanticTRANSITIONS
+  animation?: SemanticTRANSITIONS | string
 
   /** Primary content. */
   children?: React.ReactNode
 
+  /** Whether it is directional animation event or not. Use it only for custom transitions. */
+  directional?: boolean
+
   /** Duration of the CSS transition animation in milliseconds. */
   duration?: number | string | TransitionPropDuration
 }

src/modules/Transition/TransitionGroup.js

@@ -24,11 +24,14 @@ export default class TransitionGroup extends React.Component {
     as: customPropTypes.as,
 
     /** Named animation event to used. Must be defined in CSS. */
-    animation: PropTypes.oneOf(SUI.TRANSITIONS),
+    animation: PropTypes.oneOfType([PropTypes.oneOf(SUI.TRANSITIONS), PropTypes.string]),
 
     /** Primary content. */
     children: PropTypes.node,
 
+    /** Whether it is directional animation event or not. Use it only for custom transitions. */
+    directional: PropTypes.bool,
+
     /** Duration of the CSS transition animation in milliseconds. */
     duration: PropTypes.oneOfType([
       PropTypes.number,
@@ -109,13 +112,14 @@ export default class TransitionGroup extends React.Component {
   }
 
   wrapChild = (child, options = {}) => {
-    const { animation, duration } = this.props
+    const { animation, directional, duration } = this.props
     const { key } = child
     const { visible = true, transitionOnMount = false } = options
 
     return (
       <Transition
         animation={animation}
+        directional={directional}
         duration={duration}
         key={key}
         onHide={this.handleOnHide}

test/specs/modules/Transition/Transition-test.js

@@ -59,6 +59,20 @@ describe('Transition', () => {
         wrapper.should.not.have.className('out')
       })
     })
+
+    it('supports custom animations', () => {
+      wrapperShallow(
+        <Transition animation='jump' transitionOnMount={false}>
+          <p />
+        </Transition>,
+      )
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.className('jump')
+
+      wrapper.setState({ status: Transition.EXITING })
+      wrapper.should.have.className('jump')
+    })
   })
 
   describe('className', () => {
@@ -123,6 +137,36 @@ describe('Transition', () => {
     })
   })
 
+  describe('directional', () => {
+    it('adds classes when is "true"', () => {
+      wrapperShallow(
+        <Transition directional transitionOnMount={false}>
+          <p />
+        </Transition>,
+      )
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.className('in')
+
+      wrapper.setState({ status: Transition.EXITING })
+      wrapper.should.have.className('out')
+    })
+
+    it('do not add classes when is "false"', () => {
+      wrapperShallow(
+        <Transition directional={false} transitionOnMount={false}>
+          <p />
+        </Transition>,
+      )
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.not.className('in')
+
+      wrapper.setState({ status: Transition.EXITING })
+      wrapper.should.have.not.className('out')
+    })
+  })
+
   describe('children', () => {
     it('clones element', () => {
       wrapperShallow(

test/specs/modules/Transition/TransitionGroup-test.js

@@ -37,7 +37,7 @@ describe('TransitionGroup', () => {
 
     it('passes props to children', () => {
       shallow(
-        <TransitionGroup animation='scale' duration={1500}>
+        <TransitionGroup animation='scale' directional duration={1500}>
           <div />
           <div />
           <div />
@@ -46,6 +46,7 @@ describe('TransitionGroup', () => {
         .children()
         .everyWhere((item) => {
           item.should.have.prop('animation', 'scale')
+          item.should.have.prop('directional', true)
           item.should.have.prop('duration', 1500)
           item.type().should.equal(Transition)
         })