transition.scss 793 B

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