@fe6/water-pro/es/transition/style/index.css

An enterprise-class UI design language and Vue-based implementation

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/** @format */
@font-face {
  font-weight: bold;
  font-family: 'DINAlternate-Bold';
  font-style: normal;
  src: url(https://cdn.dev.mosh.cn/assets/font/din_alternate_bold.ttf) format('truetype');
}
.expand-transition-enter-active,
.expand-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.expand-transition-move {
  transition: transform 0.4s;
}
.expand-x-transition-enter-active,
.expand-x-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.expand-x-transition-move {
  transition: transform 0.4s;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}
.fade-slide-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}
.fade-slide-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity 0.25s, transform 0.3s;
}
.fade-bottom-enter-from {
  transform: translateY(-10%);
  opacity: 0;
}
.fade-bottom-leave-to {
  transform: translateY(10%);
  opacity: 0;
}
.fade-scale-leave-active,
.fade-scale-enter-active {
  transition: all 0.28s;
}
.fade-scale-enter-from {
  transform: scale(1.2);
  opacity: 0;
}
.fade-scale-leave-to {
  transform: scale(0.8);
  opacity: 0;
}
.fade-top-enter-active,
.fade-top-leave-active {
  transition: opacity 0.2s, transform 0.25s;
}
.fade-top-enter-from {
  transform: translateY(8%);
  opacity: 0;
}
.fade-top-leave-to {
  transform: translateY(-8%);
  opacity: 0;
}
.scale-transition-enter-active,
.scale-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scale-transition-move {
  transition: transform 0.4s;
}
.scale-transition-enter-from,
.scale-transition-leave,
.scale-transition-leave-to {
  transform: scale(0);
  opacity: 0;
}
.scale-rotate-transition-enter-active,
.scale-rotate-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scale-rotate-transition-move {
  transition: transform 0.4s;
}
.scale-rotate-transition-enter-from,
.scale-rotate-transition-leave,
.scale-rotate-transition-leave-to {
  transform: scale(0) rotate(-45deg);
  opacity: 0;
}
.slide-y-transition-enter-active,
.slide-y-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.slide-y-transition-move {
  transition: transform 0.4s;
}
.slide-y-transition-enter-from,
.slide-y-transition-leave-to {
  transform: translateY(-15px);
  opacity: 0;
}
.slide-y-reverse-transition-enter-active,
.slide-y-reverse-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.slide-y-reverse-transition-move {
  transition: transform 0.4s;
}
.slide-y-reverse-transition-enter-from,
.slide-y-reverse-transition-leave-to {
  transform: translateY(15px);
  opacity: 0;
}
.slide-x-transition-enter-active,
.slide-x-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.slide-x-transition-move {
  transition: transform 0.4s;
}
.slide-x-transition-enter-from,
.slide-x-transition-leave-to {
  transform: translateX(-15px);
  opacity: 0;
}
.slide-x-reverse-transition-enter-active,
.slide-x-reverse-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.slide-x-reverse-transition-move {
  transition: transform 0.4s;
}
.slide-x-reverse-transition-enter-from,
.slide-x-reverse-transition-leave-to {
  transform: translateX(15px);
  opacity: 0;
}
.scroll-y-transition-enter-active,
.scroll-y-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scroll-y-transition-move {
  transition: transform 0.4s;
}
.scroll-y-transition-enter-from,
.scroll-y-transition-leave-to {
  opacity: 0;
}
.scroll-y-transition-enter-from {
  transform: translateY(-15px);
}
.scroll-y-transition-leave-to {
  transform: translateY(15px);
}
.scroll-y-reverse-transition-enter-active,
.scroll-y-reverse-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scroll-y-reverse-transition-move {
  transition: transform 0.4s;
}
.scroll-y-reverse-transition-enter-from,
.scroll-y-reverse-transition-leave-to {
  opacity: 0;
}
.scroll-y-reverse-transition-enter-from {
  transform: translateY(15px);
}
.scroll-y-reverse-transition-leave-to {
  transform: translateY(-15px);
}
.scroll-x-transition-enter-active,
.scroll-x-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scroll-x-transition-move {
  transition: transform 0.4s;
}
.scroll-x-transition-enter-from,
.scroll-x-transition-leave-to {
  opacity: 0;
}
.scroll-x-transition-enter-from {
  transform: translateX(-15px);
}
.scroll-x-transition-leave-to {
  transform: translateX(15px);
}
.scroll-x-reverse-transition-enter-active,
.scroll-x-reverse-transition-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
.scroll-x-reverse-transition-move {
  transition: transform 0.4s;
}
.scroll-x-reverse-transition-enter-from,
.scroll-x-reverse-transition-leave-to {
  opacity: 0;
}
.scroll-x-reverse-transition-enter-from {
  transform: translateX(15px);
}
.scroll-x-reverse-transition-leave-to {
  transform: translateX(-15px);
}
.zoom-out-enter-active,
.zoom-out-leave-active {
  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
}
.zoom-out-enter-from,
.zoom-out-leave-to {
  transform: scale(0);
  opacity: 0;
}
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}
.zoom-fade-enter-from {
  transform: scale(0.92);
  opacity: 0;
}
.zoom-fade-leave-to {
  transform: scale(1.06);
  opacity: 0;
}
.ant-transition {
  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
}