transition-component v1.2.1

Transition Component

Utility for easily apply transitions on React. All the credit belongs to Adam Wathan. I just wrote an API around his code.

Props

Usage (single animation):

import { Transition } from 'transition-component'


export default () => {
  const [isOpen, setIsOpen] = useState(false)

  {/*
    Profile dropdown panel, show/hide based on dropdown state.
    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  */}
  <Transition
    show={isOpen}
    enter="transition ease-out duration-100"
    enterFrom="transform opacity-0 scale-95"
    enterTo="transform opacity-100 scale-100"
    leave="transition ease-in duration-75"
    leaveFrom="transform opacity-100 scale-100"
    leaveTo="transform opacity-0 scale-95"
  >
    <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
      ...
    </div>
  </Transition>
}

Usage (multiple animation):

import { Transition } from 'transition-component'


export default () => {
  const [isOpen, setIsOpen] = useState(false)

  <Transition show={isOpen}>
    {/* Shared parent */}
    <div>
      {/* Background overlay */}
      <Transition
        enter="transition-opacity ease-linear duration-300"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity ease-linear duration-300"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        {/* ... */}
      </Transition>

      {/* Sliding sidebar */}
      <Transition
        enter="transition ease-in-out duration-300 transform"
        enterFrom="-translate-x-full"
        enterTo="translate-x-0"
        leave="transition ease-in-out duration-300 transform"
        leaveFrom="translate-x-0"
        leaveTo="-translate-x-full"
      >
        {/* ... */}
      </Transition>
    </div>
  </Transition>
}