vue-transition.scss 498 B

123456789101112131415161718192021222324252627
  1. // 过渡动画 横向渐变
  2. .fade-transverse-leave-active,
  3. .fade-transverse-enter-active {
  4. transition: all .5s;
  5. }
  6. .fade-transverse-enter {
  7. opacity: 0;
  8. transform: translateX(-30px);
  9. }
  10. .fade-transverse-leave-to {
  11. opacity: 0;
  12. transform: translateX(30px);
  13. }
  14. // 过渡动画 缩放渐变
  15. .fade-scale-leave-active,
  16. .fade-scale-enter-active {
  17. transition: all .3s;
  18. }
  19. .fade-scale-enter {
  20. opacity: 0;
  21. transform: scale(1.2);
  22. }
  23. .fade-scale-leave-to {
  24. opacity: 0;
  25. transform: scale(0.8);
  26. }