.slide-enter {
  opacity: 0;
  transform: translateX(22px);
  z-index: 10;
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-22px);
}

.slide-enter-active,
.slide-leave-active {
  /* position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px; */
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease-out;
  will-change: transform;
}

.down-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.down-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.down-enter-active,
.down-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease-out;
  will-change: transform;
}

.up-enter {
  opacity: 0;
  transform: translateY(20px);
}

.up-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.up-enter-active,
.up-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease-out;
  will-change: transform;
}

.updown-enter {
  opacity: 0;
  transform: translateY(20px);
}

.updown-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.updown-enter-active,
.updown-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease-out;
  will-change: transform;
}

.show-enter {
  opacity: 0;
}

.show-leave-to {
  opacity: 0;
  transition: none;
}

.show-enter-active,
.show-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease;
  will-change: transform;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}

/* 两种动画样式，用于对话框 */

.fade-enter {
  opacity: 0;
  transform: scale(1.05) translateZ(0px);
}

.fade-enter-active {
  transition: transform 0.35s, opacity 0.35s;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  will-change: transform;
}

.fade-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease;
  will-change: transform;
}

.fade-leave-to {
  opacity: 0;
  transform: scale(0.95) translateZ(0px);
}

.bloom-enter {
  opacity: 0;
  transform: scale(0.95) translateZ(0px);
}

.bloom-enter-active {
  transition: transform 0.2s, opacity 0.35s;
  transition-timing-function: ease;
  will-change: transform;
  /* cubic-bezier(0.18, 0.89, 0.32, 1.28); */
  /* transform: scale(1) translateZ(0px); */
}

.bloom-leave-active {
  transition: transform 0.2s, opacity 0.2s;
  transition-timing-function: ease;
  will-change: transform;
}

.bloom-leave-to {
  opacity: 0;
  transform: scale(1.05) translateZ(0px);
}