guy
3 years ago
4 changed files with 0 additions and 479 deletions
@ -1,36 +0,0 @@
|
||||
@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; |
||||
} |
||||
} |
||||
@ -1,131 +0,0 @@
|
||||
@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; |
||||
} |
||||
} |
||||
@ -1,131 +0,0 @@
|
||||
@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; |
||||
} |
||||
} |
||||
@ -1,181 +0,0 @@
|
||||
@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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue