transition.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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. }
  36. /**
  37. * @description 重置el-menu的展开收起动画时长
  38. * @see {@link https://github.com/element-plus/element-plus/issues/4509#issuecomment-980165001}
  39. */
  40. .outer-most .el-collapse-transition-leave-active,
  41. .outer-most .el-collapse-transition-enter-active {
  42. transition: 0.12s all ease-in-out !important;
  43. }
  44. .horizontal-collapse-transition {
  45. transition: var(--pure-transition-duration) all !important;
  46. }