Restored animations

CalendarPicker.js

@@ -173,8 +173,29 @@ CalendarPicker.prototype._insertCalendarIntoWrapper = function () {
 
         handleSelectedElement(keyEvent);
     }, false);
+
+    this.calendarGrid.addEventListener('animationend', () => {
+        this._resetCalendarAnimations();
+
+        if (this.goingToPrevious) {
+            this.calendarGrid.classList.add('swoosh-down-reverse');
+            this.goingToPrevious = false;
+            this._insertDaysIntoGrid();
+        }
+        if (this.goingToNext) {
+            this.calendarGrid.classList.add('swoosh-up-reverse');
+            this.goingToNext = false;
+            this._insertDaysIntoGrid();
+        }
+
+    }, false);
 }
 
+CalendarPicker.prototype._resetCalendarAnimations = function() {
+    this.calendarGrid.classList.remove('swoosh-up', 'swoosh-up-reverse', 'swoosh-down', 'swoosh-down-reverse');
+}
+
+
 /**
  * @description Adds the "main" calendar-header.
  */
@@ -217,6 +238,8 @@ CalendarPicker.prototype._insertNavigationButtons = function () {
     // Cannot use arrow-functions for IE support :(
     var that = this;
     this.navigationWrapper.addEventListener('click', function (clickEvent) {
+        that._resetCalendarAnimations();
+
         if (clickEvent.target.closest('#' + that.previousMonthArrow.id)) {
             if (that.month === 0) {
                 that.month = 11;
@@ -288,6 +311,7 @@ CalendarPicker.prototype._insertDaysIntoGrid = function () {
  * given by the navigation. Also updates the UI with the new values.
  */
 CalendarPicker.prototype._updateCalendar = function () {
+    this.previousDate = this.date;
     this.date = new Date(this.year, this.month);
 
     this._setDateText();
@@ -301,6 +325,14 @@ CalendarPicker.prototype._updateCalendar = function () {
     window.requestAnimationFrame(function () {
         that.calendarHeaderTitle.textContent = that.listOfAllMonthsAsText[that.month] + ' - ' + that.year;
         that._insertDaysIntoGrid();
+
+        if (that.previousDate < that.date) {
+            that.calendarGrid.classList.add('swoosh-up');
+            that.goingToPrevious = true;
+        } else {
+            that.calendarGrid.classList.add('swoosh-down');
+            that.goingToNext = true;
+        }
     })
 }
 

CalendarPicker.style.css

@@ -1,3 +1,52 @@
+@keyframes swoosh-up {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0.1;
+        transform: translateY(0.8em);
+    }
+}
+
+@keyframes swoosh-down {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0.1;
+        transform: translateY(-0.8em);
+    }
+}
+
+.swoosh-up {
+    animation: swoosh-up 100ms ;
+}
+
+.swoosh-up-reverse {
+    animation: swoosh-up 100ms reverse;
+}
+
+.swoosh-down {
+    animation: swoosh-down 100ms ;
+}
+
+.swoosh-down-reverse {
+    animation: swoosh-down 100ms reverse;
+}
+
+@media (prefers-reduced-motion) {
+    .swoosh-up,
+    .swoosh-up-reverse,
+    .swoosh-down,
+    .swoosh-down-reverse {
+      animation: none;
+    }
+}
+
 #calendar-wrapper {
     width: 100%;
     display: grid;