Browse Source
Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '2594d25a2d0c199ee284e25464a0aef42442d45c': animatees6
guy
3 years ago
4 changed files with 475 additions and 0 deletions
@ -0,0 +1,35 @@
|
||||
@import "../../../index"; |
||||
|
||||
.fade-motion(@className, @keyframeName) { |
||||
.make-motion(@className, @keyframeName); |
||||
.@{className}-enter, |
||||
.@{className}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: linear; |
||||
} |
||||
.@{className}-leave { |
||||
animation-timing-function: linear; |
||||
} |
||||
} |
||||
|
||||
.fade-motion(bi-fade, biFade); |
||||
|
||||
@keyframes biFadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes biFadeOut { |
||||
0% { |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
} |
||||
} |
@ -0,0 +1,130 @@
|
||||
@import "../../../index"; |
||||
|
||||
.move-motion(@className, @keyframeName) { |
||||
.make-motion(@className, @keyframeName); |
||||
.@{className}-enter, |
||||
.@{className}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-circ; |
||||
} |
||||
.@{className}-leave { |
||||
animation-timing-function: @ease-in-circ; |
||||
} |
||||
} |
||||
|
||||
.move-motion(bi-move-up, biMoveUp); |
||||
.move-motion(bi-move-down, biMoveDown); |
||||
.move-motion(bi-move-left, biMoveLeft); |
||||
.move-motion(bi-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,130 @@
|
||||
@import "../../../index"; |
||||
|
||||
.slide-motion(@className, @keyframeName) { |
||||
.make-motion(@className, @keyframeName); |
||||
.@{className}-enter, |
||||
.@{className}-appear { |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-quint; |
||||
} |
||||
.@{className}-leave { |
||||
animation-timing-function: @ease-in-quint; |
||||
} |
||||
} |
||||
|
||||
.slide-motion(bi-slide-up, biSlideUp); |
||||
.slide-motion(bi-slide-down, biSlideDown); |
||||
.slide-motion(bi-slide-left, biSlideLeft); |
||||
.slide-motion(bi-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,180 @@
|
||||
@import "../../../index"; |
||||
|
||||
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) { |
||||
.make-motion(@className, @keyframeName, @duration); |
||||
.@{className}-enter, |
||||
.@{className}-appear { |
||||
transform: scale(0); // need this by yiminghe |
||||
opacity: 0; |
||||
animation-timing-function: @ease-out-circ; |
||||
|
||||
&-prepare { |
||||
transform: none; |
||||
} |
||||
} |
||||
.@{className}-leave { |
||||
animation-timing-function: @ease-in-out-circ; |
||||
} |
||||
} |
||||
|
||||
// For Modal, Select choosen item |
||||
.zoom-motion(bi-zoom, biZoom); |
||||
// For Popover, Popconfirm, Dropdown |
||||
.zoom-motion(bi-zoom-big, biZoomBig); |
||||
// For Tooltip |
||||
.zoom-motion(bi-zoom-big-fast, biZoomBig, @animation-duration-fast); |
||||
|
||||
.zoom-motion(bi-zoom-up, biZoomUp); |
||||
.zoom-motion(bi-zoom-down, biZoomDown); |
||||
.zoom-motion(bi-zoom-left, biZoomLeft); |
||||
.zoom-motion(bi-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