Freedom.Transition

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

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 :: forall state. Config -> Array (VNode state) -> VNode state

Transition passed children.