Module

Freedom.Transition

Package
purescript-freedom-transition
Repository
purescript-freedom/purescript-freedom-transition

#Transition Source

type Transition = { activeClassName :: String, delay :: Milliseconds, startClassName :: String }

The type of transition

  • startClassName: The class name when start transition
  • activeClassName: The class name for transition
  • delay: Delay for real DOM manipulation. you should set transition duration

#Config Source

type Config = { enter :: Maybe Transition, leave :: Maybe Transition }

The type of transition config

  • enter: The transition for adding nodes
  • leave: The transition for removing nodes

You have to style children like:

.enter {
  opacity: 0;
}
.enter.enter-active {
  opacity: 1;
  transition: opacity 0.3s linear;
}
.leave {
  opacity: 1;
}
.leave.leave-active {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#transitionGroup Source

transitionGroup :: forall state f. Functor (f state) => Config -> Array (VNode f state) -> VNode f state

Transition passed children.