Help Wanted: Using transitionName in Dialog component

[jrweinb]

Hello - I am trying to use the transitionName prop in the Dialog component. I was wondering if there are any examples or documentation on using this property. Specifically I am looking for guidance on doing this (from the docs):

Providing your own name here will require defining new CSS transition properties.

Thank You!

[giladgray]

@jrweinb you must define your transition in CSS per the CSSTransition docs. blueprint has a sweet Sass mixin that lets us define these transitions very simply. this mixin is shipped in the src/ directory in the NPM package.

[giladgray]

closing as resolved

[dylangrandmont]

In case anyone else stumbles across this github issue while trying to do the same thing, here is a small code snippet to help out. I spent over an hour reading through the links above to understand how this works so hopefully it saves someone else some time (this really deserves to be explained in the docs IMO)

// Component.module.scss
.Portal {
  :global(.Drawer-enter) { // :global here ensures the class names are not transformed
    opacity: 0;
  }
  :global(.Drawer-enter-active) {
    opacity: 1;
    transition: opacity 100ms;
  }
  :global(.Drawer-exit) {
    opacity: 0;
  }
  :global(.Drawer-exit-active) {
    opacity: 0;
  }
}

// Component.tsx
import styles from './Component.module.scss'

function Component() {
  ...
  return (
    <Drawer
      transitionName={'Drawer'} {/* This string must match the prefix of the xyz-enter, xyz-enter-active etc. classes above*/}
      transitionDuration={100}
      portalClassName={styles.Portal}/>
  )
}

[adidahiya]

@dylangrandmont thanks for posting your snippet. I agree, we could use better docs about "customizing CSS transitions" on Blueprint components.