/**
 * Transitions 组件样式 - 对应 MUI Transitions
 */

/* 基础过渡 */
.MuiTransition-root {
  transition-property: opacity, transform;
}

/* =============================================
 * Fade 淡入淡出
 * ============================================= */
.MuiFade-root {
  transition-property: opacity;
}

.MuiFade-entered {
  opacity: 1;
}

.MuiFade-exited {
  opacity: 0;
}

/* =============================================
 * Collapse 折叠展开
 * ============================================= */
.MuiCollapse-root {
  overflow: hidden;
}

.MuiCollapse-vertical {
  transition-property: height;
}

.MuiCollapse-horizontal {
  transition-property: width;
}

.MuiCollapse-entered {
  overflow: visible;
}

.MuiCollapse-hidden {
  visibility: hidden;
}

.MuiCollapse-wrapper {
  display: flex;
  width: 100%;
}

.MuiCollapse-wrapperInner {
  width: 100%;
}

/* =============================================
 * Grow 放大出现
 * ============================================= */
.MuiGrow-root {
  transition-property: opacity, transform;
}

.MuiGrow-entered {
  opacity: 1;
  transform: scale(1);
}

.MuiGrow-exited {
  opacity: 0;
  transform: scale(0.75);
}

/* =============================================
 * Slide 滑动
 * ============================================= */
.MuiSlide-root {
  transition-property: transform;
}

.MuiSlide-entered {
  transform: translate(0, 0);
}

.MuiSlide-direction-left.MuiSlide-exited {
  transform: translateX(100%);
}

.MuiSlide-direction-right.MuiSlide-exited {
  transform: translateX(-100%);
}

.MuiSlide-direction-up.MuiSlide-exited {
  transform: translateY(100%);
}

.MuiSlide-direction-down.MuiSlide-exited {
  transform: translateY(-100%);
}

/* =============================================
 * Zoom 缩放
 * ============================================= */
.MuiZoom-root {
  transition-property: transform;
}

.MuiZoom-entered {
  transform: scale(1);
}

.MuiZoom-exited {
  transform: scale(0);
}