animation.less 2.3 KB

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