江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

113 lines
2.0 KiB

1 year ago
  1. /**
  2. * vue版本动画内置的动画模式有如下
  3. * fade淡入
  4. * zoom缩放
  5. * fade-zoom缩放淡入
  6. * fade-up上滑淡入
  7. * fade-down下滑淡入
  8. * fade-left左滑淡入
  9. * fade-right右滑淡入
  10. * slide-up上滑进入
  11. * slide-down下滑进入
  12. * slide-left左滑进入
  13. * slide-right右滑进入
  14. */
  15. $u-zoom-scale: scale(0.95);
  16. .u-fade-enter-active,
  17. .u-fade-leave-active {
  18. transition-property: opacity;
  19. }
  20. .u-fade-enter,
  21. .u-fade-leave-to {
  22. opacity: 0
  23. }
  24. .u-fade-zoom-enter,
  25. .u-fade-zoom-leave-to {
  26. transform: $u-zoom-scale;
  27. opacity: 0;
  28. }
  29. .u-fade-zoom-enter-active,
  30. .u-fade-zoom-leave-active {
  31. transition-property: transform, opacity;
  32. }
  33. .u-fade-down-enter-active,
  34. .u-fade-down-leave-active,
  35. .u-fade-left-enter-active,
  36. .u-fade-left-leave-active,
  37. .u-fade-right-enter-active,
  38. .u-fade-right-leave-active,
  39. .u-fade-up-enter-active,
  40. .u-fade-up-leave-active {
  41. transition-property: opacity, transform;
  42. }
  43. .u-fade-up-enter,
  44. .u-fade-up-leave-to {
  45. transform: translate3d(0, 100%, 0);
  46. opacity: 0
  47. }
  48. .u-fade-down-enter,
  49. .u-fade-down-leave-to {
  50. transform: translate3d(0, -100%, 0);
  51. opacity: 0
  52. }
  53. .u-fade-left-enter,
  54. .u-fade-left-leave-to {
  55. transform: translate3d(-100%, 0, 0);
  56. opacity: 0
  57. }
  58. .u-fade-right-enter,
  59. .u-fade-right-leave-to {
  60. transform: translate3d(100%, 0, 0);
  61. opacity: 0
  62. }
  63. .u-slide-down-enter-active,
  64. .u-slide-down-leave-active,
  65. .u-slide-left-enter-active,
  66. .u-slide-left-leave-active,
  67. .u-slide-right-enter-active,
  68. .u-slide-right-leave-active,
  69. .u-slide-up-enter-active,
  70. .u-slide-up-leave-active {
  71. transition-property: transform;
  72. }
  73. .u-slide-up-enter,
  74. .u-slide-up-leave-to {
  75. transform: translate3d(0, 100%, 0)
  76. }
  77. .u-slide-down-enter,
  78. .u-slide-down-leave-to {
  79. transform: translate3d(0, -100%, 0)
  80. }
  81. .u-slide-left-enter,
  82. .u-slide-left-leave-to {
  83. transform: translate3d(-100%, 0, 0)
  84. }
  85. .u-slide-right-enter,
  86. .u-slide-right-leave-to {
  87. transform: translate3d(100%, 0, 0)
  88. }
  89. .u-zoom-enter-active,
  90. .u-zoom-leave-active {
  91. transition-property: transform
  92. }
  93. .u-zoom-enter,
  94. .u-zoom-leave-to {
  95. transform: $u-zoom-scale
  96. }