.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}

.zoom-in-top-enter,
.zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-center-enter-active,
.zoom-in-center-leave-active {
  transition: all .3s cubic-bezier(.55, 0, .1, 1);
}

.zoom-in-center-enter,
.zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

.zoom-in-bottom-enter-active,
.zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center bottom;
}

.zoom-in-bottom-enter,
.zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.zoom-in-left-enter-active,
.zoom-in-left-leave-active {
  opacity: 1;
  transform: translateX(0%);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center left;
}

.zoom-in-left-enter, .zoom-in-left-leave-active{
  opacity: 0;
  transform: translateX(100%);
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all .5s;
}

.slide-right-enter {
  opacity: 0;
}

.slide-right-leave-active {
  opacity: 0;
}

.slide-left-enter {
  opacity: 0;
}

.slide-left-leave-active {
  opacity: 0;
}

.fade-in-enter-active,
.fade-in-leave-active {
  will-change: transform;
  transition: all .5s;
}

.fade-in-enter,
.fade-in-leave-active {
  opacity: 0;
}


.collapse-transition-enter-active,
.collapse-transition-leave-active {
  transition: height 0.3s linear;
}

.collapse-transition-enter,
.collapse-transition-leave-to {
  height: 0;
  overflow: hidden;
}