uxcore-album/build/animate.less

uxcore-album component for uxcore.

@keyframes albumZoomIn {
  0% {
    opacity: .5;
    transform: scale(.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes albumZoomOut {
  0% {
    opacity: .8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(.2);
  }
}

.album-overlay-enter, .album-overlay-appear {
  animation-duration: @transition-duration;
  .album-stage {
    transform: scale(.2);
    opacity: .5;
    animation-duration: @transition-duration;
    animation-fill-mode: both;
    animation-timing-function: @transition-ease;
    animation-play-state: paused;
  }
  &-active {
    .album-stage {
      animation-name: albumZoomIn;
      animation-play-state: running;
    }
  }
}
.album-overlay-leave {
   animation-duration: @transition-duration;
  .album-stage {
    transform: scale(1);
    opacity: .8;
    animation-duration: @transition-duration;
    animation-fill-mode: both;
    animation-timing-function: @transition-ease;
    animation-play-state: paused;
  }
  &-active {
    .album-stage {
      animation-name: albumZoomOut;
      animation-play-state: running;
    }
  }
}