Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonFlagContainerHeaderDividerImageIconLabelInputListPlaceholderLoaderRailRevealStepSegment
Collections
BreadcrumbFormMessageMenuGridTable
Views
CommentFeedStatisticCardItemAdvertisement
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSidebarSearchTabStickyTransition
Addons
ConfirmRadioPortalSelectPaginationText 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 TransitionGroup 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
Blazing deployments by Vercel.