antui-mobile/src/components/layout/style/mixin.less

mobile ui for antd

@import "../../../style/mixins/index";

@transition-layout: ~"page-transition";
@z-index-view-top: 20;
@z-index-view-bottom: 10;
@transition-layout-duration: .4s;
@transition-layout-timing-function: cubic-bezier(.36, .66, .04, 1);

.antui-transition-pages {
  position: absolute;
  top: 0;
  right: 0;
  bottom:0;
  left: 0;
  overflow: hidden;
  opacity: 1;
  transition: .3s opacity;
  &.hide{
    opacity: 0;
    z-index: -1000;
  }
}

// Animations
// -----------------------------------------------------------------------------

// sfl: Show From Left
@keyframes amt-view-sfl-enter {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-sfl-leave {
  to {
    opacity: .75;
    transform: translate3d(25%, 0, 0);
  }
}


// Show From Right
@keyframes amt-view-sfr-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-sfr-leave {
  to {
    opacity: .75;
    transform: translate3d(-25%, 0, 0);
  }
}

// Show From Bottom
@keyframes amt-view-sfb-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-sfb-leave {
  to {
    opacity: .75;
    transform: translate3d(0, -25%, 0);
  }
}

// Show From top
@keyframes amt-view-sft-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-sft-leave {
  to {
    opacity: .75;
    transform: translate3d(0, 25%, 0);
  }
}

// REVEAL
// -----------------------------------------------------------------------------

// Reveal From Left
@keyframes amt-view-rfl-enter {
  from {
    opacity: .75;
    transform: translate3d(75%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-rfl-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

// Reveal From Right
@keyframes amt-view-rfr-enter {
  from {
    opacity: .75;
    transform: translate3d(-25%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-rfr-leave {
  to {
    opacity: 0.75;
    transform: translate3d(100%, 0, 0);
  }
}

// Reveal From Bottom
@keyframes amt-view-rfb-enter {
  from {
    opacity: .75;
    transform: translate3d(0, -25%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-rfb-leave {
  to {
    opacity: 0.75;
    transform: translate3d(0, 100%, 0);
  }
}

//Reveal From Top
@keyframes amt-view-rft-enter {
  from {
    opacity: .75;
    transform: translate3d(0, 75%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes amt-view-rft-leave {
  to {
    opacity: 0.75;
    transform: translate3d(0, -100%, 0);
  }
}

// Transition: Show
// sfl: show-from-left
// sfr: show-from-right
// sfb: show-from-bottom
// sft: show-from-top
// -----------------------------------------------------------------------------

.view-transition-common {
  animation-duration: @transition-layout-duration;
  animation-timing-function: @transition-layout-timing-function;
  animation-fill-mode: forwards;
}

.@{transition-layout}-sfr-enter-active,
.@{transition-layout}-sfl-enter-active,
.@{transition-layout}-sfb-enter-active,
.@{transition-layout}-sft-enter-active {
  pointer-events: none;
  z-index: @z-index-view-top;
}

.@{transition-layout}-sfr-leave,
.@{transition-layout}-sfl-leave,
.@{transition-layout}-sfb-leave,
.@{transition-layout}-sft-leave {
  pointer-events: none;
  z-index: @z-index-view-bottom;
}

// animation common
.@{transition-layout}-sfl-enter-active,
.@{transition-layout}-sfl-leave,
.@{transition-layout}-sfr-enter-active,
.@{transition-layout}-sfr-leave,
.@{transition-layout}-sfb-enter-active,
.@{transition-layout}-sfb-leave,
.@{transition-layout}-sft-enter-active,
.@{transition-layout}-sft-leave {
  .view-transition-common;
}

.@{transition-layout}-sfr-enter-active {
  animation-name: amt-view-sfr-enter;
}

.@{transition-layout}-sfl-enter-active {
  animation-name: amt-view-sfl-enter;
}

.@{transition-layout}-sfb-enter-active {
  animation-name: amt-view-sfb-enter;
}

.@{transition-layout}-sft-enter-active {
  animation-name: amt-view-sft-enter;
}

.@{transition-layout}-sfr-leave {
  animation-name: amt-view-sfr-leave;
}

.@{transition-layout}-sfl-leave {
  animation-name: amt-view-sfl-leave;
}

.@{transition-layout}-sfb-leave {
  animation-name: amt-view-sfb-leave;
}

.@{transition-layout}-sft-leave {
  animation-name: amt-view-sft-leave;
}


// Transition: Reveal
// rfr: reveal from right
// rfl: reveal from left
// rfb: reveal from bottom
// rft: reveal from top
// -----------------------------------------------------------------------------

.@{transition-layout}-rfr-enter-active,
.@{transition-layout}-rfl-enter-active,
.@{transition-layout}-rfb-enter-active,
.@{transition-layout}-rft-enter-active {
  pointer-events: none;
  z-index: @z-index-view-bottom;
}

.@{transition-layout}-rfr-leave,
.@{transition-layout}-rfl-leave,
.@{transition-layout}-rfb-leave,
.@{transition-layout}-rft-leave {
  pointer-events: none;
  z-index: @z-index-view-top;
}

// animation common
.@{transition-layout}-rfl-enter-active,
.@{transition-layout}-rfl-leave,
.@{transition-layout}-rfr-enter-active,
.@{transition-layout}-rfr-leave,
.@{transition-layout}-rfb-enter-active,
.@{transition-layout}-rfb-leave,
.@{transition-layout}-rft-enter-active,
.@{transition-layout}-rft-leave {
  .view-transition-common;
}

.@{transition-layout}-rfr-enter-active {
  animation-name: amt-view-rfr-enter;
}

.@{transition-layout}-rfr-leave {
  animation-name: amt-view-rfr-leave;
}

.@{transition-layout}-rfl-enter-active {
  animation-name: amt-view-rfl-enter;
}

.@{transition-layout}-rfl-leave {
  animation-name: amt-view-rfl-leave;
}

.@{transition-layout}-rfb-enter-active {
  animation-name: amt-view-rfb-enter;
}

.@{transition-layout}-rfb-leave {
  animation-name: amt-view-rfb-leave;
}

.@{transition-layout}-rft-enter-active {
  animation-name: amt-view-rft-enter;
}

.@{transition-layout}-rft-leave {
  animation-name: amt-view-rft-leave;
}