transition.css

.curtain-enter-active,
.curtain-leave-active {
  transition: clip-path 0.3s ease-in-out;
}

.curtain-enter-from,
.curtain-leave-to {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.curtain-enter-to,
.curtain-leave-from {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.slideLeft-enter-active,
.slideLeft-leave-active {
  transition: clip-path 0.3s ease-in-out;
}

.slideLeft-enter-from,
.slideLeft-leave-to {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.slideLeft-enter-to,
.slideLeft-leave-from {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.slideRight-enter-active,
.slideRight-leave-active {
  transition: clip-path 0.3s ease-in-out;
}

.slideRight-enter-from,
.slideRight-leave-to {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.slideRight-enter-to,
.slideRight-leave-from {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.zoom-enter-active,
.zoom-leave-active {
  transition: transform 0.3s ease-in-out;
}

.zoom-enter-from,
.zoom-leave-to {
  transform: scale(0) translate(-50%, -50%);
}

.zoom-enter-to,
.zoom-leave-from {
  transform: scale(1) translate(-50%, -50%);
}