uni-transition.wxss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. .uni-transition {
  2. transition-timing-function: ease;
  3. transition-duration: 0.3s;
  4. transition-property: opacity, -webkit-transform;
  5. transition-property: transform, opacity;
  6. transition-property: transform, opacity, -webkit-transform;
  7. }
  8. .fade-in {
  9. opacity: 0;
  10. }
  11. .fade-active {
  12. opacity: 1;
  13. }
  14. .slide-top-in {
  15. /* transition-property: transform, opacity; */
  16. -webkit-transform: translateY(-100%);
  17. transform: translateY(-100%);
  18. }
  19. .slide-top-active {
  20. -webkit-transform: translateY(0);
  21. transform: translateY(0);
  22. /* opacity: 1; */
  23. }
  24. .slide-right-in {
  25. -webkit-transform: translateX(100%);
  26. transform: translateX(100%);
  27. }
  28. .slide-right-active {
  29. -webkit-transform: translateX(0);
  30. transform: translateX(0);
  31. }
  32. .slide-bottom-in {
  33. -webkit-transform: translateY(100%);
  34. transform: translateY(100%);
  35. }
  36. .slide-bottom-active {
  37. -webkit-transform: translateY(0);
  38. transform: translateY(0);
  39. }
  40. .slide-left-in {
  41. -webkit-transform: translateX(-100%);
  42. transform: translateX(-100%);
  43. }
  44. .slide-left-active {
  45. -webkit-transform: translateX(0);
  46. transform: translateX(0);
  47. opacity: 1;
  48. }
  49. .zoom-in-in {
  50. -webkit-transform: scale(0.8);
  51. transform: scale(0.8);
  52. }
  53. .zoom-out-active {
  54. -webkit-transform: scale(1);
  55. transform: scale(1);
  56. }
  57. .zoom-out-in {
  58. -webkit-transform: scale(1.2);
  59. transform: scale(1.2);
  60. }