N3-components/N3-components

/*fade*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
  opacity: 1;
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

/*fadeLeft*/
.fadeLeft-enter-active,.fadeLeft-leave-active {
  transition: all .3s ease;
}
.fadeLeft-enter, .fadeLeft-leave-active {
  transform:translateX(-10px);
  opacity: 0;
}

/*fadeDown*/
.fadeDown-enter-active,.fadeDown-leave-active {
  transition: all .3s ease;
}
.fadeDown-enter, .fadeDown-leave-active {
  transform:translateY(-10px);
  opacity: 0;
}

.collapse-enter, .collapse-leave-active{
  overflow: hidden;
}
/*bounce*/
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}


@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}
/*scale*/
.scale-enter,
.fade-enter {
  display: block;
}
.scale-enter-active {
  animation:scale-in 0.15s ease-in;
}
.scale-leave-active {
  animation:scale-out 0.15s ease-out;
}
@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/*slide*/
.slideleft-enter-active {
  animation:slideleft-in .3s;
}
.slideleft-leave-active {
  animation:slideleft-out .3s;
}

@keyframes slideleft-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideleft-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.slideright-enter-active {
  animation:slideright-in .3s;
}
.slideright-leave-active {
  animation:slideright-out .3s;
}
@keyframes slideright-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideright-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}