bin-ui/src/styles/common/transition.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

//fade-in
.fade-in-enter-active,.fade-in-leave-active {
  transition: all $animation-duration-slow cubic-bezier(.55, 0, .1, 1);
}
.fade-in-enter,.fade-in-leave-to {
  opacity: 0;
}
//  fade-in-linear
.fade-in-linear-enter-active,.fade-in-linear-leave-active {
  transition: all $animation-duration-slow;
}
.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-to {
  opacity: 0;
}
// move-left
.move-left-enter-active, .move-left-leave-active {
  transition: all $animation-duration-slow ease-in-out
  transform-origin: 0 0;
}
.move-left-enter, .move-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
// move-right
.move-right-enter-active, .move-right-leave-active {
  transition: all $animation-duration-slow ease-in-out
}
.move-right-enter, .move-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
//  中间缩放zoom-in-center
.zoom-in-center-enter-active,.zoom-in-center-leave-active {
  transition: all $animation-duration-slow cubic-bezier(.55, 0, .1, 1);
}
.zoom-in-center-enter,
.zoom-in-center-leave-to {
  opacity: 0;
  transform: scaleX(0);
}
//  底部缩放zoom-in-bottom
.zoom-in-bottom-enter-active,
.zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1), opacity $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center bottom;
}
.zoom-in-bottom-enter,.zoom-in-bottom-leave-to {
  opacity: 0;
  transform: scaleY(0);
}
//  顶部缩放zoom-in-top
.zoom-in-top-enter-active,.zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1), opacity $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}
.zoom-in-top-enter,.zoom-in-top-leave-to {
  opacity: 0;
  transform: scaleY(0);
}
//  左侧缩放zoom-in-left
.zoom-in-enter-active,.zoom-in-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1), opacity $animation-duration-slow cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: left left;
}
.zoom-in-enter,.zoom-in-leave-to {
  opacity: 0;
  transform: scale(.45, .45);
}

//  下拉动画
.collapse-transition {
  transition: $animation-duration-slow height ease-in-out, $animation-duration-slow padding-top ease-in-out, $animation-duration-slow padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
  transition: $animation-duration-slow width ease-in-out, $animation-duration-slow padding-left ease-in-out, $animation-duration-slow padding-right ease-in-out;
}

.list-enter-active,.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.opacity-transition {
  transition: opacity $animation-duration-slow cubic-bezier(.55, 0, .1, 1);
}
// 过渡动画 横向渐变
.fade-transverse-leave-active,
.fade-transverse-enter-active {
  transition: all $animation-duration-slow;
}
.fade-transverse-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transverse-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 过渡动画 缩放渐变
.fade-scale-leave-active, .fade-scale-enter-active {
  transition: all $animation-duration-slow;
}
.fade-scale-enter {
  opacity: 0;
  transform: scale(1.2);
}
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

// 过渡动画 缩放渐变
.fade-scale-move-leave-active, .fade-scale-move-enter-active {
  transition: all $animation-duration-slow;
}
.fade-scale-move-enter, .fade-scale-move-leave-to {
  opacity: 0;
  transform: scale(.9) translateY(-30px);
}

.fade-down-leave-active, .fade-down-enter-active {
  transition: all $animation-duration-slow;
}
.fade-down-enter, .fade-down-leave-to {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}
@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}