Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchStickySidebarTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Transition
A transition is an animation usually used to move content in or out of view.

src/modules/Transition/Transition.js
Semantic UI Transition Docs
TransitionTransition.Group

Types

Transition

A Transition animates a single child by toggling the visible prop.

Do not unmount a Transition child or else it cannot be animated.

  • Use the unmountOnHide prop to unmount the child after the animation exits.
  • Use a Transition.Group to animate children as they mount and unmount.

Transition Group

A Transition Group animates children as they mount and unmount.

Explorers

Directional Animations

This explorer animates Transition Group children as they mount and unmount. Use it to try directional animations that show and hide the element.

Static Animations

This explorer animates a single Transition child by toggling the visible prop. Use it to try unidirectional animations for elements that are always visible.

Trigger static animations just as you trigger directional animations, by toggling the visible prop. The value is not significant since static animations are unidirectional.

Usage

Duration

Duration of the CSS transition animation can be defined separately for hide and showanimations.

This is the bottom