falcon-ui/src/styles/transition.less

ui components for falcon

@import "./vars.less";
@import "./mixins.less";

.all-transition {
  .transition(all, 300ms, cubic-bezier(0.645,0.045,0.355,1));
}
.fade-transition {
  .transition(opacity, 300ms, cubic-bezier(0.23, 1, 0.32, 1));
}
.fade-linear-transition {
  .transition(opacity, 200ms, linear);
}

.md-fade-transition {
  .transition(transform,opacity; 300ms; cubic-bezier(0.23, 1, 0.32, 1));
}
.border-transition-base {
  .transition(border-color, 200ms, cubic-bezier(0.645, 0.045, 0.355, 1));
}
.color-transition-base {
  .transition(color, 200ms, cubic-bezier(0.645, 0.045, 0.355, 1));
}

.fl-fade-in-linear-enter-active,
.fl-fade-in-linear-leave-active {
  .fade-linear-transition();
}
.fl-fade-in-linear-enter,
.fl-fade-in-linear-leave-to {
  opacity: 0;
}
.fl-fade-in-linear-enter-to,
.fl-fade-in-linear-leave {
  opacity: 1;
}

.fl-fade-in-enter-active,
.fl-fade-in-leave-active {
  .transition(all, 300ms, cubic-bezier(0.55, 0, 0.1, 1));
}
.fl-fade-in-enter,
.fl-fade-in-leave-to {
  opacity: 0;
}
.fl-fade-in-enter-to,
.fl-fade-in-leave {
  opacity: 1;
}

.fl-zoom-in-center-enter-active,
.fl-zoom-in-center-leave-active {
  .transition(all, 300ms, cubic-bezier(0.55, 0, 0.1, 1));
}
.fl-zoom-in-center-enter,
.fl-zoom-in-center-leave-to {
  opacity: 0;
  transform: scaleX(0);
}
.fl-fade-in-center-enter-to,
.fl-fade-in-center-leave {
  opacity: 1;
  transform: scaleX(1);
}

.fl-zoom-in-top-enter-active,
.fl-zoom-in-top-leave-active {
  .md-fade-transition();
  transform-origin: 50% 0;
}
.fl-zoom-in-top-enter,
.fl-zoom-in-top-leave-to {
  opacity: 0;
  transform: scaleY(0);
}
.fl-zoom-in-top-enter-to,
.fl-zoom-in-top-enter-leave {
  opacity: 1;
  transform: scaleY(1);
}

.fl-zoom-in-bottom-enter-active,
.fl-zoom-in-bottom-leave-active {
  .md-fade-transition;
  transform-origin: 50% 100%;
}
.fl-zoom-in-bottom-enter,
.fl-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.fl-zoom-in-bottom-enter-to,
.fl-zoom-in-bottom-enter-leave {
  opacity: 1;
  transform: scaleY(1);
}

.fl-zoom-in-left-enter-active,
.fl-zoom-in-left-leave-active {
  .md-fade-transition();
  transform-origin: 0 50%;
}
.fl-zoom-in-left-enter,
.fl-zoom-in-left-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
.fl-zoom-in-left-enter-to,
.fl-zoom-in-left-enter-leave {
  opacity: 1;
  transform: scaleX(1);
}

.fl-zoom-in-right-enter-active,
.fl-zoom-in-right-leave-active {
  .md-fade-transition();
  transform-origin: 100% 50%;
}
.fl-zoom-in-right-enter,
.fl-zoom-in-left-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
.fl-zoom-in-right-enter-to,
.fl-zoom-in-right-enter-leave {
  opacity: 1;
  transform: scaleX(1);
}

.collapse-transition {
  .transition(height, padding-top, padding-bottom; 300ms; ease-in-out);
}
.horizontal-collapse-transition {
  .transition(width, padding-left, padding-right; 300ms; ease-in-out);
}

.fl-list-enter-active,
.fl-list-leave-active {
  .transition(all, 1000ms);
}
.fl-list-enter,
.fl-list-leave-active {
  opacity: 0;
  transform: translateY(-30px);
}

.fl-opacity-transition {
  .transition(opacity, 300ms, cubic-bezier(0.55, 0, 0.1, 1));
}