uni-transition.wxss 1.5 KB

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