stacjownik/src/styles/animations.scss

$animDuration: 150ms;
$animType: ease-in-out;

// List animation
.list-anim-move,
.list-anim-enter-active,
.list-anim-leave-active {
  transition: all $animDuration ease;
}

.list-anim-enter-from,
.list-anim-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.list-anim-leave-active {
  position: absolute;
  width: 100%;
}

// View animation
.view-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0.02;
  }

  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
    min-height: 100%;
  }
}

// Data status list animation
.status-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-active {
    transition: all $animDuration ease-out;
  }

  &-leave-active {
    transition: all $animDuration ease-out;
  }
}

// Card animation
.card-anim {
  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
}

// Modal animation
.modal-anim {
  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
  }

  &-enter-from,
  &-leave-to {
    transform: translateY(-25%);
    opacity: 0;
  }
}