| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- .side-content {
- animation-duration: 0.2s;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- }
- .side-content[data-side='top'] {
- animation-name: slide-up;
- }
- .side-content[data-side='bottom'] {
- animation-name: slide-down;
- }
- .side-content[data-side='left'] {
- animation-name: slide-left;
- }
- .side-content[data-side='right'] {
- animation-name: slide-right;
- }
- .breadcrumb-transition-enter-active {
- transition:
- transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
- opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
- }
- .breadcrumb-transition-leave-active {
- display: none;
- }
- .breadcrumb-transition-enter-from {
- opacity: 0;
- transform: translateX(30px) skewX(-30deg);
- }
- /*
- .breadcrumb-transition-move,
- .breadcrumb-transition-enter-active {
- transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
- }
- .breadcrumb-transition-leave-active {
- display: none;
- }
- .breadcrumb-transition-enter-from {
- opacity: 0;
- transform: translateX(-5px);
- } */
- @keyframes slide-down {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
- @keyframes slide-left {
- from {
- opacity: 0;
- transform: translateX(-10px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
- @keyframes slide-right {
- from {
- opacity: 0;
- transform: translateX(-10px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
- @keyframes slide-up {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
|