index.wxss 932 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. /* pages/animation-group/index.wxss */
  2. .example {
  3. position: fixed;
  4. top: 50%;
  5. left: 50%;
  6. z-index: 10;
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. width: 256rpx;
  11. height: 256rpx;
  12. margin-top: -128rpx;
  13. margin-left: -128rpx;
  14. background-color: #387ef5;
  15. color: #fff;
  16. font-size: 36rpx;
  17. font-weight: bold;
  18. border-radius: 8rpx;
  19. }
  20. .wux-animate--custom-enter {
  21. transition: opacity .3s, transform .3s;
  22. opacity: 0;
  23. transform: translate3d(-100%, 0, 0) rotate(-120deg);
  24. }
  25. .wux-animate--custom-enter-active,
  26. .wux-animate--custom-enter-done {
  27. opacity: 1;
  28. transform: translateZ(0);
  29. }
  30. .wux-animate--custom-exit {
  31. transition: opacity .3s, transform .3s;
  32. opacity: 1;
  33. transform: translateZ(0);
  34. }
  35. .wux-animate--custom-exit-active,
  36. .wux-animate--custom-exit-done {
  37. opacity: 0;
  38. transform: translate3d(-100%, 0, 0) rotate(-120deg);
  39. }