motion.less 883 B

123456789101112131415161718192021222324252627282930313233
  1. .motion-common(@duration: @animation-duration-base) {
  2. animation-duration: @duration;
  3. animation-fill-mode: both;
  4. }
  5. .motion-common-leave(@duration: @animation-duration-base) {
  6. animation-duration: @duration;
  7. animation-fill-mode: both;
  8. }
  9. .make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  10. .@{className}-enter,
  11. .@{className}-appear {
  12. .motion-common(@duration);
  13. animation-play-state: paused;
  14. }
  15. .@{className}-leave {
  16. .motion-common-leave(@duration);
  17. animation-play-state: paused;
  18. }
  19. .@{className}-enter.@{className}-enter-active,
  20. .@{className}-appear.@{className}-appear-active {
  21. animation-name: ~'@{keyframeName}In';
  22. animation-play-state: running;
  23. }
  24. .@{className}-leave.@{className}-leave-active {
  25. animation-name: ~'@{keyframeName}Out';
  26. animation-play-state: running;
  27. pointer-events: none;
  28. }
  29. }