transition.scss 655 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. /* fade */
  2. .fade-enter-active,
  3. .fade-leave-active {
  4. transition: opacity 0.28s;
  5. }
  6. .fade-enter,
  7. .fade-leave-active {
  8. opacity: 0;
  9. }
  10. /* fade-transform */
  11. .fade-transform-leave-active,
  12. .fade-transform-enter-active {
  13. transition: all 0.5s;
  14. }
  15. .fade-transform-enter-from {
  16. opacity: 0;
  17. transform: translateX(-30px);
  18. }
  19. .fade-transform-leave-to {
  20. opacity: 0;
  21. transform: translateX(30px);
  22. }
  23. /* breadcrumb transition */
  24. .breadcrumb-enter-active,
  25. .breadcrumb-leave-active {
  26. transition: all 0.5s;
  27. }
  28. .breadcrumb-enter-from,
  29. .breadcrumb-leave-active {
  30. opacity: 0;
  31. transform: translateX(20px);
  32. }
  33. .breadcrumb-leave-active {
  34. position: absolute;
  35. }