Slide components in and out based on mount status using react-transition-group

Properties

Slide takes a map of properties, many properties passed to the slide component are passed through to TransitionGroup (container) or Transition (child).

• :direction. Pred: #{:up :down :left :right}. Default: :left. Which direction the component should be animated.

• :duration. Pred: pos-int?. Default 500. The duration used for the slide animation in milliseconds.

• :timeout. Pred pos-int?. Default 500. The duration of the transition, in milliseconds. This prop is passed to the Transition component.

• :unmount-on-exit. Pred boolean?. Default false. By default the child component stays mounted after it reaches the exited state. Set this if you’d prefer to unmount the component after it finishes exiting. This prop is passed to the Transition component.

• :mount-on-enter. Pred boolean?. Default false. By default the child component is mounted immediately along with the parent Transition component. If you want to lazy mount the component on the first (= :in true) you can set mount-on-enter. After the first enter transition the component will stay mounted, even on exited , unless you also specify unmount-on-exit. This prop is passed to the Transition component.

• :class. Pred string?. Default nil. String classname to be applied to the outer TransitionGroup component.

• :easing. Pred #{:ease-in-quad :ease-in-cubic :ease-in-quart :ease-in-quint :ease-in-expo :ease-in-circ :ease-out-quad :ease-out-cubic :ease-out-quart :ease-out-quint :ease-out-expo :ease-out-circ :ease-in-out-quad :ease-in-out-cubic :ease-in-out-quart :ease-in-out-quint :ease-in-out-expo :ease-in-out-circ}. Default :ease-in-out-cubic. Which easing function to use for the CSS transitions.

• :appear. Pred boolean?. Default false. Normally a component is not transitioned if it is shown when the Transition component mounts. If you want to transition on the first mount set appear to true, and the component will transition in as soon as the Transition mounts.

• :enter. Pred boolean. Default true. Enable or disable enter transitions.

• :exit. Pred boolean. Default true. Enable or disable enter transitions.

• :on-exit. Pred fn?. Default noop. Callback fired before the exiting status is applied.

• :on-exited. Pred fn?. Default noop. Callback fired after the exited status is applied.

• :on-enter. Pred fn?

• :on-entered. Pred fn?. Default noop. Callback fired after the entered status is applied. This prop is passed to the inner Transition component.

• :classes. Pred: keys #{:transition :child-container}, vals string?. Default nil. A map of override classes, one for the Transition component, and one for the child-container, which is the innermost child.

• :opacity. Pred: boolean. Default false If you want opacity added to the slide animation

Important note It is important that height is set with CSS on the TransitionGroup, by passing a string with the :class key value pair. It is deliberately not set by this component since the height can be one of any number of things like 100%, 100vh or a hardcoded size like 200px. This component will not work unless a height it set.

It is also important that you set a :key on the children of this component since that’s whats used to differentiate between children when animating.

Example usage

(let [images ["url1" "url2" "url3"]
      image (r/atom (first images))]
  (fn []
    [Slide {:direction :left
            :classes {:child-container "my-child-class"}
            :class "my-main-class-with-included-height"}
     [:div {:on-click #(swap! image (rand-nth images))
            :key @image}
      [:img {:src @image}]]]))