guy
3 years ago
10 changed files with 590 additions and 3 deletions
@ -1,6 +1,7 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-segment-button { |
||||
.transition(color .3s,background .3s,border-color .3s,box-shadow .3s); |
||||
@transition: color .3s,background .3s,border-color .3s,box-shadow .3s; |
||||
.transition(@transition); |
||||
color: @color-bi-text-highlight; |
||||
} |
||||
|
@ -0,0 +1,36 @@
|
||||
@import "../../../index"; |
||||
|
||||
.fade-motion(@className, @keyframeName) { |
||||
@name: ~'bi-@{className}'; |
||||
.make-motion(@name, @keyframeName); |
||||
.@{name}-enter, |
||||
.@{name}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: linear; |
||||
} |
||||
.@{name}-leave { |
||||
animation-timing-function: linear; |
||||
} |
||||
} |
||||
|
||||
.fade-motion(fade, biFade); |
||||
|
||||
@keyframes biFadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biFadeOut { |
||||
0% { |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
} |
||||
} |
@ -0,0 +1,131 @@
|
||||
@import "../../../index"; |
||||
|
||||
.move-motion(@className, @keyframeName) { |
||||
@name: ~'bi-@{className}'; |
||||
.make-motion(@name, @keyframeName); |
||||
.@{name}-enter, |
||||
.@{name}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-circ; |
||||
} |
||||
.@{name}-leave { |
||||
animation-timing-function: @ease-in-circ; |
||||
} |
||||
} |
||||
|
||||
.move-motion(move-up, biMoveUp); |
||||
.move-motion(move-down, biMoveDown); |
||||
.move-motion(move-left, biMoveLeft); |
||||
.move-motion(move-right, biMoveRight); |
||||
|
||||
@keyframes biMoveDownIn { |
||||
0% { |
||||
transform: translateY(100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveDownOut { |
||||
0% { |
||||
transform: translateY(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveLeftIn { |
||||
0% { |
||||
transform: translateX(-100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveLeftOut { |
||||
0% { |
||||
transform: translateX(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(-100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveRightIn { |
||||
0% { |
||||
transform: translateX(100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveRightOut { |
||||
0% { |
||||
transform: translateX(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveUpIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biMoveUpOut { |
||||
0% { |
||||
transform: translateY(0%); |
||||
transform-origin: 0 0; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(-100%); |
||||
transform-origin: 0 0; |
||||
opacity: 0; |
||||
} |
||||
} |
@ -0,0 +1,131 @@
|
||||
@import "../../../index"; |
||||
|
||||
.slide-motion(@className, @keyframeName) { |
||||
@name: ~'bi-@{className}'; |
||||
.make-motion(@name, @keyframeName); |
||||
.@{name}-enter, |
||||
.@{name}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-quint; |
||||
} |
||||
.@{name}-leave { |
||||
animation-timing-function: @ease-in-quint; |
||||
} |
||||
} |
||||
|
||||
.slide-motion(slide-up, biSlideUp); |
||||
.slide-motion(slide-down, biSlideDown); |
||||
.slide-motion(slide-left, biSlideLeft); |
||||
.slide-motion(slide-right, biSlideRight); |
||||
|
||||
@keyframes biSlideUpIn { |
||||
0% { |
||||
transform: scaleY(0.8); |
||||
transform-origin: 0% 0%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleY(1); |
||||
transform-origin: 0% 0%; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideUpOut { |
||||
0% { |
||||
transform: scaleY(1); |
||||
transform-origin: 0% 0%; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleY(0.8); |
||||
transform-origin: 0% 0%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideDownIn { |
||||
0% { |
||||
transform: scaleY(0.8); |
||||
transform-origin: 100% 100%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleY(1); |
||||
transform-origin: 100% 100%; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideDownOut { |
||||
0% { |
||||
transform: scaleY(1); |
||||
transform-origin: 100% 100%; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleY(0.8); |
||||
transform-origin: 100% 100%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideLeftIn { |
||||
0% { |
||||
transform: scaleX(0.8); |
||||
transform-origin: 0% 0%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleX(1); |
||||
transform-origin: 0% 0%; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideLeftOut { |
||||
0% { |
||||
transform: scaleX(1); |
||||
transform-origin: 0% 0%; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleX(0.8); |
||||
transform-origin: 0% 0%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideRightIn { |
||||
0% { |
||||
transform: scaleX(0.8); |
||||
transform-origin: 100% 0%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleX(1); |
||||
transform-origin: 100% 0%; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biSlideRightOut { |
||||
0% { |
||||
transform: scaleX(1); |
||||
transform-origin: 100% 0%; |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
transform: scaleX(0.8); |
||||
transform-origin: 100% 0%; |
||||
opacity: 0; |
||||
} |
||||
} |
@ -0,0 +1,181 @@
|
||||
@import "../../../index"; |
||||
|
||||
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) { |
||||
@name: ~'bi-@{className}'; |
||||
.make-motion(@name, @keyframeName, @duration); |
||||
.@{name}-enter, |
||||
.@{name}-appear { |
||||
transform: scale(0); // need this by yiminghe |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-circ; |
||||
|
||||
&-prepare { |
||||
transform: none; |
||||
} |
||||
} |
||||
.@{name}-leave { |
||||
animation-timing-function: @ease-in-out-circ; |
||||
} |
||||
} |
||||
|
||||
// For Modal, Select choosen item |
||||
.zoom-motion(zoom, biZoom); |
||||
// For Popover, Popconfirm, Dropdown |
||||
.zoom-motion(zoom-big, biZoomBig); |
||||
// For Tooltip |
||||
.zoom-motion(zoom-big-fast, biZoomBig, @animation-duration-fast); |
||||
|
||||
.zoom-motion(zoom-up, biZoomUp); |
||||
.zoom-motion(zoom-down, biZoomDown); |
||||
.zoom-motion(zoom-left, biZoomLeft); |
||||
.zoom-motion(zoom-right, biZoomRight); |
||||
|
||||
@keyframes biZoomIn { |
||||
0% { |
||||
transform: scale(0.2); |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomOut { |
||||
0% { |
||||
transform: scale(1); |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.2); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomBigIn { |
||||
0% { |
||||
transform: scale(0.8); |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomBigOut { |
||||
0% { |
||||
transform: scale(1); |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomUpIn { |
||||
0% { |
||||
transform: scale(0.8); |
||||
transform-origin: 50% 0%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
transform-origin: 50% 0%; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomUpOut { |
||||
0% { |
||||
transform: scale(1); |
||||
transform-origin: 50% 0%; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
transform-origin: 50% 0%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomLeftIn { |
||||
0% { |
||||
transform: scale(0.8); |
||||
transform-origin: 0% 50%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
transform-origin: 0% 50%; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomLeftOut { |
||||
0% { |
||||
transform: scale(1); |
||||
transform-origin: 0% 50%; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
transform-origin: 0% 50%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomRightIn { |
||||
0% { |
||||
transform: scale(0.8); |
||||
transform-origin: 100% 50%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
transform-origin: 100% 50%; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomRightOut { |
||||
0% { |
||||
transform: scale(1); |
||||
transform-origin: 100% 50%; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
transform-origin: 100% 50%; |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomDownIn { |
||||
0% { |
||||
transform: scale(0.8); |
||||
transform-origin: 50% 100%; |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1); |
||||
transform-origin: 50% 100%; |
||||
} |
||||
} |
||||
|
||||
@keyframes biZoomDownOut { |
||||
0% { |
||||
transform: scale(1); |
||||
transform-origin: 50% 100%; |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(0.8); |
||||
transform-origin: 50% 100%; |
||||
opacity: 0; |
||||
} |
||||
} |
@ -0,0 +1,96 @@
|
||||
// Animation |
||||
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); |
||||
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); |
||||
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); |
||||
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
||||
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); |
||||
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); |
||||
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); |
||||
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); |
||||
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); |
||||
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); |
||||
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); |
||||
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); |
||||
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); |
||||
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); |
||||
|
||||
// Animation |
||||
@animation-duration-slow: 0.3s; // Modal |
||||
@animation-duration-base: 0.2s; |
||||
@animation-duration-fast: 0.1s; // Tooltip |
||||
|
||||
.motion-common(@duration: @animation-duration-base) { |
||||
animation-duration: @duration; |
||||
animation-fill-mode: both; |
||||
} |
||||
|
||||
.motion-common-leave(@duration: @animation-duration-base) { |
||||
animation-duration: @duration; |
||||
animation-fill-mode: both; |
||||
} |
||||
|
||||
.make-motion(@className, @keyframeName, @duration: @animation-duration-base) { |
||||
.@{className}-enter, |
||||
.@{className}-appear { |
||||
.motion-common(@duration); |
||||
|
||||
animation-play-state: paused; |
||||
} |
||||
.@{className}-leave { |
||||
.motion-common-leave(@duration); |
||||
|
||||
animation-play-state: paused; |
||||
} |
||||
.@{className}-enter.@{className}-enter-active, |
||||
.@{className}-appear.@{className}-appear-active { |
||||
animation-name: ~'@{keyframeName}In'; |
||||
animation-play-state: running; |
||||
} |
||||
.@{className}-leave.@{className}-leave-active { |
||||
animation-name: ~'@{keyframeName}Out'; |
||||
animation-play-state: running; |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
|
||||
.fade-motion-enter() { |
||||
opacity: 0; |
||||
animation-timing-function: linear; |
||||
.motion-common(@animation-duration-base); |
||||
|
||||
animation-name: biFadeIn; |
||||
animation-play-state: running; |
||||
} |
||||
|
||||
.fade-motion-leave() { |
||||
animation-timing-function: linear; |
||||
.motion-common-leave(@animation-duration-base); |
||||
|
||||
animation-name: biFadeOut; |
||||
animation-play-state: running; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.zoom-big-motion-enter() { |
||||
transform: scale(0); // need this by yiminghe |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-circ; |
||||
|
||||
.motion-common(@animation-duration-base); |
||||
animation-play-state: paused; |
||||
} |
||||
.zoom-big-motion-enter-active() { |
||||
animation-name: biZoomBigIn; |
||||
animation-play-state: running; |
||||
} |
||||
|
||||
.zoom-big-motion-leave() { |
||||
animation-timing-function: @ease-in-out-circ; |
||||
|
||||
.motion-common-leave(@animation-duration-base); |
||||
} |
||||
.zoom-big-motion-leave-active() { |
||||
animation-name: biZoomBigOut; |
||||
animation-play-state: running; |
||||
pointer-events: none; |
||||
} |
Loading…
Reference in new issue