Animation when changing months

[gpbl]

The input's date picker in Chrome has a nice animation when browsing between months. I'd like to add something similar to the react-day-picker:

• it wouldn't work with numberOfMonths greater then 1
• it should be optional, e.g. by setting a new prop animate

[hnqlv]

@gpbl this would be amazing! Do you have any plans in mind of how to tackle this?

[gpbl]

This issue is stale and I don't think we will add animation soon, so I'm closing this.

[anoopgq]

Use this style for animating the react-day-picker

.DayPickerInput-OverlayWrapper {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    z-index: 90;
}

@keyframes slideIn {
  0% {
      transform: translateY(1rem);
      opacity: 0;
  }
  100% {
      transform: translateY(0rem);
      opacity: 1;
  }
  0% {
      transform: translateY(1rem);
      opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
  }
  100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
  }
  0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
  }
}