|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- .slide-motion(@className, @keyframeName) {
- .make-motion(@className, @keyframeName);
- .@{className}-enter, .@{className}-appear {
- opacity: 0;
- animation-timing-function: @ease-in-out;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-out;
- }
- }
-
- .slide-motion(slide-up, ivuSlideUp);
- .slide-motion(slide-down, ivuSlideDown);
- .slide-motion(slide-left, ivuSlideLeft);
- .slide-motion(slide-right, ivuSlideRight);
-
- @keyframes ivuSlideUpIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- }
-
- @keyframes ivuSlideUpOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleY(.8);
- }
- }
-
- @keyframes ivuSlideDownIn {
- 0% {
- opacity: 0;
- transform-origin: 100% 100%;
- transform: scaleY(.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 100% 100%;
- transform: scaleY(1);
- }
- }
-
- @keyframes ivuSlideDownOut {
- 0% {
- opacity: 1;
- transform-origin: 100% 100%;
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 100% 100%;
- transform: scaleY(.8);
- }
- }
-
- @keyframes ivuSlideLeftIn {
- 0% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleX(.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleX(1);
- }
- }
-
- @keyframes ivuSlideLeftOut {
- 0% {
- opacity: 1;
- transform-origin: 0% 0%;
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 0% 0%;
- transform: scaleX(.8);
- }
- }
-
- @keyframes ivuSlideRightIn {
- 0% {
- opacity: 0;
- transform-origin: 100% 0%;
- transform: scaleX(.8);
- }
- 100% {
- opacity: 1;
- transform-origin: 100% 0%;
- transform: scaleX(1);
- }
- }
-
- @keyframes ivuSlideRightOut {
- 0% {
- opacity: 1;
- transform-origin: 100% 0%;
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- transform-origin: 100% 0%;
- transform: scaleX(.8);
- }
- }
|