.shrink-enter {
  transform: translateY(100%);
  opacity: 0;
}
.shrink-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 500ms ease-out, opacity 500ms ease-out;
}
.shrink-exit {
  transform: translateY(0);
  height: 100%;
  opacity: 1;
}
.shrink-exit-active {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 500ms ease-in, opacity 500ms ease-in;
}