birdpaper-ui/es/common/animation.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

// 淡入淡出
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

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


// 下拉面板
.fade-dropdown-enter-from,
.fade-dropdown-appear-from {
  transform: scaleY(0.9);
  transform-origin: 0 0;
  opacity: 0;
}

.fade-dropdown-enter-to,
.fade-dropdown-appear-to {
  transform: scaleY(1);
  transform-origin: 0 0;
  opacity: 1;
}

.fade-dropdown-enter-active,
.fade-dropdown-appear-active {
  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
}

.fade-dropdown-leave-from {
  transform: scaleY(1);
  transform-origin: 0 0;
  opacity: 1;
}

.fade-dropdown-leave-to {
  transform: scaleY(0.9);
  transform-origin: 0 0;
  opacity: 0;
}

.fade-dropdown-leave-active {
  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
}

.form-error-enter-from,
.form-error-appear-from {
  opacity: 0;
}

.form-error-enter-to,
.form-error-appear-to {
  opacity: 1;
}

.form-error-enter-active,
.form-error-appear-active {
  transition: opacity .2s cubic-bezier(0, 0, 1, 1);
  animation: bp-form-error .4s cubic-bezier(0, 0, 1, 1);
}

@keyframes bp-form-error {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}