@enact/ui/Transition/Transition.module.css

A collection of simplified unstyled cross-platform UI components for Enact

.transition .inner {
  overflow: hidden;
}
.transition.slide {
  overflow: hidden;
}
.transition.slide .inner {
  transition-property: transform;
  will-change: transform;
}
.transition.fade .inner {
  transition-property: opacity;
  will-change: opacity;
}
.transition.shown.slide .inner {
  transform: translate3d(0, 0, 0);
}
.transition.shown.clip.right,
.transition.shown.clip.left {
  max-width: 100%;
}
.transition.shown.fade .inner {
  opacity: 1;
}
.transition.hidden.slide.up .inner {
  transform: translateY(-100%);
}
.transition.hidden.slide.right .inner {
  transform: translateX(100%);
}
.transition.hidden.slide.down .inner {
  transform: translateY(100%);
}
.transition.hidden.slide.left .inner {
  transform: translateX(-100%);
}
.transition.hidden.clip.up,
.transition.hidden.clip.down {
  height: 0;
}
.transition.hidden.clip.right,
.transition.hidden.clip.left {
  max-width: 0;
}
.transition.hidden.fade .inner {
  opacity: 0;
}
.transition.clip {
  position: relative;
}
.transition.clip.up,
.transition.clip.down {
  transition-property: height;
  will-change: height;
}
.transition.clip.right,
.transition.clip.left {
  transition-property: max-width;
  will-change: max-width;
}
.transition.clip.right .inner,
.transition.clip.left .inner {
  position: relative;
}
.transition.clip.up .inner {
  top: 0;
}
.transition.clip.down .inner {
  transition-property: transform;
  will-change: transform;
}
.transition.clip.down.shown .inner {
  transform: translate(0, 0);
}
.transition.clip.right .inner {
  right: 0;
}
.transition.clip.right.hidden .inner {
  transform: translateX(-100%);
}
.transition.clip.down.hidden .inner {
  transform: translateY(-100%);
}
.transition.short,
.transition.short .inner {
  transition-duration: 250ms;
}
.transition.medium,
.transition.medium .inner {
  transition-duration: 500ms;
}
.transition.long,
.transition.long .inner {
  transition-duration: 1s;
}
.transition.ease,
.transition.ease .inner {
  transition-timing-function: ease;
}
.transition.ease-in,
.transition.ease-in .inner {
  transition-timing-function: ease-in;
}
.transition.ease-out,
.transition.ease-out .inner {
  transition-timing-function: ease-out;
}
.transition.ease-in-out,
.transition.ease-in-out .inner {
  transition-timing-function: ease-in-out;
}
.transition.ease-in-quart,
.transition.ease-in-quart .inner {
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.transition.ease-out-quart,
.transition.ease-out-quart .inner {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.transition.linear,
.transition.linear .inner {
  transition-timing-function: linear;
}