animation.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. @keyframes van-slide-up-enter {
  2. from {
  3. transform: translate3d(0, 100%, 0);
  4. }
  5. }
  6. @keyframes van-slide-up-leave {
  7. to {
  8. transform: translate3d(0, 100%, 0);
  9. }
  10. }
  11. @keyframes van-slide-down-enter {
  12. from {
  13. transform: translate3d(0, -100%, 0);
  14. }
  15. }
  16. @keyframes van-slide-down-leave {
  17. to {
  18. transform: translate3d(0, -100%, 0);
  19. }
  20. }
  21. @keyframes van-slide-left-enter {
  22. from {
  23. transform: translate3d(-100%, 0, 0);
  24. }
  25. }
  26. @keyframes van-slide-left-leave {
  27. to {
  28. transform: translate3d(-100%, 0, 0);
  29. }
  30. }
  31. @keyframes van-slide-right-enter {
  32. from {
  33. transform: translate3d(100%, 0, 0);
  34. }
  35. }
  36. @keyframes van-slide-right-leave {
  37. to {
  38. transform: translate3d(100%, 0, 0);
  39. }
  40. }
  41. @keyframes van-fade-in {
  42. from {
  43. opacity: 0;
  44. }
  45. to {
  46. opacity: 1;
  47. }
  48. }
  49. @keyframes van-fade-out {
  50. from {
  51. opacity: 1;
  52. }
  53. to {
  54. opacity: 0;
  55. }
  56. }
  57. @keyframes van-rotate {
  58. from {
  59. transform: rotate(0deg);
  60. }
  61. to {
  62. transform: rotate(360deg);
  63. }
  64. }
  65. .van-fade {
  66. &-enter-active {
  67. animation: .3s van-fade-in;
  68. }
  69. &-leave-active {
  70. animation: .3s van-fade-out;
  71. }
  72. }
  73. .van-slide-up {
  74. &-enter-active {
  75. animation: van-slide-up-enter .3s both ease;
  76. }
  77. &-leave-active {
  78. animation: van-slide-up-leave .3s both ease;
  79. }
  80. }
  81. .van-slide-down {
  82. &-enter-active {
  83. animation: van-slide-down-enter .3s both ease;
  84. }
  85. &-leave-active {
  86. animation: van-slide-down-leave .3s both ease;
  87. }
  88. }
  89. .van-slide-left {
  90. &-enter-active {
  91. animation: van-slide-left-enter .3s both ease;
  92. }
  93. &-leave-active {
  94. animation: van-slide-left-leave .3s both ease;
  95. }
  96. }
  97. .van-slide-right {
  98. &-enter-active {
  99. animation: van-slide-right-enter .3s both ease;
  100. }
  101. &-leave-active {
  102. animation: van-slide-right-leave .3s both ease;
  103. }
  104. }