3
0

nvue-ani-map.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. export default {
  2. fade: {
  3. enter: { opacity: 0 },
  4. 'enter-to': { opacity: 1 },
  5. leave: { opacity: 1 },
  6. 'leave-to': { opacity: 0 }
  7. },
  8. 'fade-up': {
  9. enter: { opacity: 0, transform: 'translateY(100%)' },
  10. 'enter-to': { opacity: 1, transform: 'translateY(0)' },
  11. leave: { opacity: 1, transform: 'translateY(0)' },
  12. 'leave-to': { opacity: 0, transform: 'translateY(100%)' }
  13. },
  14. 'fade-down': {
  15. enter: { opacity: 0, transform: 'translateY(-100%)' },
  16. 'enter-to': { opacity: 1, transform: 'translateY(0)' },
  17. leave: { opacity: 1, transform: 'translateY(0)' },
  18. 'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
  19. },
  20. 'fade-left': {
  21. enter: { opacity: 0, transform: 'translateX(-100%)' },
  22. 'enter-to': { opacity: 1, transform: 'translateY(0)' },
  23. leave: { opacity: 1, transform: 'translateY(0)' },
  24. 'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
  25. },
  26. 'fade-right': {
  27. enter: { opacity: 0, transform: 'translateX(100%)' },
  28. 'enter-to': { opacity: 1, transform: 'translateY(0)' },
  29. leave: { opacity: 1, transform: 'translateY(0)' },
  30. 'leave-to': { opacity: 0, transform: 'translateX(100%)' }
  31. },
  32. 'slide-up': {
  33. enter: { transform: 'translateY(100%)' },
  34. 'enter-to': { transform: 'translateY(0)' },
  35. leave: { transform: 'translateY(0)' },
  36. 'leave-to': { transform: 'translateY(100%)' }
  37. },
  38. 'slide-down': {
  39. enter: { transform: 'translateY(-100%)' },
  40. 'enter-to': { transform: 'translateY(0)' },
  41. leave: { transform: 'translateY(0)' },
  42. 'leave-to': { transform: 'translateY(-100%)' }
  43. },
  44. 'slide-left': {
  45. enter: { transform: 'translateX(-100%)' },
  46. 'enter-to': { transform: 'translateY(0)' },
  47. leave: { transform: 'translateY(0)' },
  48. 'leave-to': { transform: 'translateX(-100%)' }
  49. },
  50. 'slide-right': {
  51. enter: { transform: 'translateX(100%)' },
  52. 'enter-to': { transform: 'translateY(0)' },
  53. leave: { transform: 'translateY(0)' },
  54. 'leave-to': { transform: 'translateX(100%)' }
  55. },
  56. zoom: {
  57. enter: { transform: 'scale(0.95)' },
  58. 'enter-to': { transform: 'scale(1)' },
  59. leave: { transform: 'scale(1)' },
  60. 'leave-to': { transform: 'scale(0.95)' }
  61. },
  62. 'fade-zoom': {
  63. enter: { opacity: 0, transform: 'scale(0.95)' },
  64. 'enter-to': { opacity: 1, transform: 'scale(1)' },
  65. leave: { opacity: 1, transform: 'scale(1)' },
  66. 'leave-to': { opacity: 0, transform: 'scale(0.95)' }
  67. }
  68. }