123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- .fade {
- &-enter-active,
- &-leave-active {
- transition: opacity 0.3s ease;
- }
- &-enter-from,
- &-leave-to {
- opacity: 0;
- }
- }
- .fade-absolute {
- &-enter-active,
- &-leave-active {
- transition: opacity 0.3s ease;
- }
- &-enter-from,
- &-leave-to {
- position: absolute;
- opacity: 0;
- }
- }
- .fade-up {
- &-enter-active,
- &-leave-active {
- transition:
- opacity 0.3s ease,
- transform 0.3s ease-in-out;
- }
- &-enter-from,
- &-leave-to {
- opacity: 0;
- transform: translateY(0.3rem);
- }
- }
- .fade-move {
- &-enter-active,
- &-move,
- &-leave-active {
- transition: opacity 0.5s ease;
- }
- &-leave-active {
- position: absolute;
- top: -100%; /* Add overflow clip on parent to hide elements */
- }
- &-enter-from,
- &-leave-to {
- opacity: 0;
- }
- }
- .collapse {
- &-enter-active,
- &-leave-active {
- transition:
- height 0.2s ease-in-out,
- opacity 0.2s ease;
- overflow: hidden;
- }
- &-enter-from,
- &-leave-to {
- opacity: 0;
- }
- }
- .pseudo-transition {
- &-enter-active,
- &-leave-active {
- transition: transform 0.3s ease;
- }
- &-enter-from,
- &-leave-to {
- transform: translateY(0);
- }
- }
- .slide-down {
- &-enter-active,
- &-leave-active {
- transition: transform 0.2s ease;
- }
- &-enter-from,
- &-leave-to {
- transform: translateY(-100%);
- }
- }
|