index.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .l-transition {
  2. transition-timing-function: ease;
  3. // transition-duration: 3000ms;
  4. transform: translate(0, 0);
  5. opacity: 1;
  6. }
  7. .l-fade-enter-active,
  8. .l-fade-leave-active {
  9. transition-property: opacity;
  10. }
  11. .l-fade-enter,
  12. .l-fade-leave-to {
  13. opacity: 0;
  14. }
  15. .l-fade-up-enter-active,
  16. .l-fade-up-leave-active,
  17. .l-fade-down-enter-active,
  18. .l-fade-down-leave-active,
  19. .l-fade-left-enter-active,
  20. .l-fade-left-leave-active,
  21. .l-fade-right-enter-active,
  22. .l-fade-right-leave-active {
  23. transition-property: opacity, transform;
  24. }
  25. .l-fade-up-enter,
  26. .l-fade-up-leave-to {
  27. transform: translate(0, 100%);
  28. opacity: 0;
  29. }
  30. .l-fade-down-enter,
  31. .l-fade-down-leave-to {
  32. transform: translate(0, -100%);
  33. opacity: 0;
  34. }
  35. .l-fade-left-enter,
  36. .l-fade-left-leave-to {
  37. transform: translate(-100%, 0);
  38. opacity: 0;
  39. }
  40. .l-fade-right-enter,
  41. .l-fade-right-leave-to {
  42. transform: translate(100%, 0);
  43. opacity: 0;
  44. }
  45. .l-slide-up-enter-active,
  46. .l-slide-up-leave-active,
  47. .l-slide-down-enter-active,
  48. .l-slide-down-leave-active,
  49. .l-slide-left-enter-active,
  50. .l-slide-left-leave-active,
  51. .l-slide-right-enter-active,
  52. .l-slide-right-leave-active {
  53. transition-property: transform;
  54. }
  55. .l-slide-up-enter,
  56. .l-slide-up-leave-to {
  57. transform: translate(0, 100%);
  58. }
  59. .l-slide-down-enter,
  60. .l-slide-down-leave-to {
  61. transform: translate(0, -100%);
  62. }
  63. .l-slide-left-enter,
  64. .l-slide-left-leave-to {
  65. transform: translate(-100%, 0);
  66. }
  67. .l-slide-right-enter,
  68. .l-slide-right-leave-to {
  69. transform: translate(100%, 0);
  70. }