.mask-motion-enter-active,
.mask-motion-appear-active,
.mask-motion-leave-active {
  transition: all 0.3s;
}
.mask-motion-enter,
.mask-motion-appear {
  opacity: 0;
}
.mask-motion-enter-active,
.mask-motion-appear-active {
  opacity: 1;
}
.mask-motion-leave {
  opacity: 1;
}
.mask-motion-leave-active {
  opacity: 0;
}
.panel-motion-top-enter-start,
.panel-motion-top-appear-start,
.panel-motion-top-leave-start {
  transition: none!important;
}
.panel-motion-top-enter-active,
.panel-motion-top-appear-active,
.panel-motion-top-leave-active {
  transition: all 0.3s;
}
.panel-motion-top-enter,
.panel-motion-top-appear {
  transform: translateY(-100%);
}
.panel-motion-top-enter-active,
.panel-motion-top-appear-active {
  transform: translateY(0);
}
.panel-motion-top-leave {
  transform: translateY(0);
}
.panel-motion-top-leave-active {
  transform: translateY(-100%) !important;
}
.panel-motion-bottom-enter-start,
.panel-motion-bottom-appear-start,
.panel-motion-bottom-leave-start {
  transition: none!important;
}
.panel-motion-bottom-enter-active,
.panel-motion-bottom-appear-active,
.panel-motion-bottom-leave-active {
  transition: all 0.3s;
}
.panel-motion-bottom-enter,
.panel-motion-bottom-appear {
  transform: translateY(100%);
}
.panel-motion-bottom-enter-active,
.panel-motion-bottom-appear-active {
  transform: translateY(0);
}
.panel-motion-bottom-leave {
  transform: translateY(0);
}
.panel-motion-bottom-leave-active {
  transform: translateY(100%) !important;
}