kui-vue/components/drawer/styles/animal.less

A high quality UI Toolkit built on Vue.js 2.0

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    // transform: translateX(100%)
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutTop {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutBottom {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    // transform: translate3d(0, 100%, 0);
    transform: translateY(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.k-drawer-left-enter-active {
  animation: fadeInLeft .2s linear;
}

.k-drawer-left-leave-active {
  animation: fadeOutLeft .2s linear;
}

.k-drawer-right-enter-active {
  animation: fadeInRight .2s linear;
}

.k-drawer-right-leave-active {
  animation: fadeOutRight .2s linear;
}

.k-drawer-fade-enter-active {
  animation: fadeIn .4s linear;
}

.k-drawer-fade-leave-active {
  animation: fadeOut .4s linear;
}

.k-drawer-top-enter-active {
  animation: fadeInTop .2s linear;
}

.k-drawer-top-leave-active {
  animation: fadeOutTop .2s linear;
}

.k-drawer-bottom-enter-active {
  animation: fadeInBottom .2s linear;
}

.k-drawer-bottom-leave-active {
  animation: fadeOutBottom .2s linear;
}