index.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .wd-transition {
  2. transition-timing-function: ease;
  3. }
  4. .wd-fade-enter,
  5. .wd-fade-leave-to {
  6. opacity: 0;
  7. }
  8. .wd-fade-enter-active,
  9. .wd-fade-leave-active {
  10. transition-property: opacity;
  11. }
  12. .wd-fade-up-enter,
  13. .wd-fade-up-leave-to {
  14. transform: translate3d(0, 100%, 0);
  15. opacity: 0;
  16. }
  17. .wd-fade-down-enter,
  18. .wd-fade-down-leave-to {
  19. transform: translate3d(0, -100%, 0);
  20. opacity: 0;
  21. }
  22. .wd-fade-left-enter,
  23. .wd-fade-left-leave-to {
  24. transform: translate3d(-100%, 0, 0);
  25. opacity: 0;
  26. }
  27. .wd-fade-right-enter,
  28. .wd-fade-right-leave-to {
  29. transform: translate3d(100%, 0, 0);
  30. opacity: 0;
  31. }
  32. .wd-slide-up-enter,
  33. .wd-slide-up-leave-to {
  34. transform: translate3d(0, 100%, 0);
  35. }
  36. .wd-slide-down-enter,
  37. .wd-slide-down-leave-to {
  38. transform: translate3d(0, -100%, 0);
  39. }
  40. .wd-slide-left-enter,
  41. .wd-slide-left-leave-to {
  42. transform: translate3d(-100%, 0, 0);
  43. }
  44. .wd-slide-right-enter,
  45. .wd-slide-right-leave-to {
  46. transform: translate3d(100%, 0, 0);
  47. }
  48. .wd-zoom-in-enter,
  49. .wd-zoom-in-leave-to {
  50. opacity: 0;
  51. transform: scale(0.8);
  52. }
  53. .wd-zoom-out-enter,
  54. .wd-zoom-out-leave-to {
  55. transform: scale(1.2);
  56. opacity: 0;
  57. }
  58. .wd-zoom-in-enter-active,
  59. .wd-zoom-in-leave-active,
  60. .wd-zoom-out-enter-active,
  61. .wd-zoom-out-leave-active,
  62. .wd-fade-up-enter-active,
  63. .wd-fade-up-leave-active,
  64. .wd-fade-down-enter-active,
  65. .wd-fade-down-leave-active,
  66. .wd-fade-left-enter-active,
  67. .wd-fade-left-leave-active,
  68. .wd-fade-right-enter-active,
  69. .wd-fade-right-leave-active {
  70. transition-property: opacity, transform;
  71. }
  72. .wd-slide-up-enter-active,
  73. .wd-slide-up-leave-active,
  74. .wd-slide-down-enter-active,
  75. .wd-slide-down-leave-active,
  76. .wd-slide-left-enter-active,
  77. .wd-slide-left-leave-active,
  78. .wd-slide-right-enter-active,
  79. .wd-slide-right-leave-active {
  80. transition-property: transform;
  81. }