animate.js 1.9KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { canIUseAnimate } from '../common/version';
  2. import { getRect } from '../common/utils';
  3. function useAnimate(context, expanded, mounted, height) {
  4. const selector = '.van-collapse-item__wrapper';
  5. if (expanded) {
  6. context.animate(selector, [
  7. { height: 0, ease: 'ease-in-out', offset: 0 },
  8. { height: `${height}px`, ease: 'ease-in-out', offset: 1 },
  9. { height: `auto`, ease: 'ease-in-out', offset: 1 },
  10. ], mounted ? 300 : 0, () => {
  11. context.clearAnimation(selector);
  12. });
  13. return;
  14. }
  15. context.animate(selector, [
  16. { height: `${height}px`, ease: 'ease-in-out', offset: 0 },
  17. { height: 0, ease: 'ease-in-out', offset: 1 },
  18. ], 300, () => {
  19. context.clearAnimation(selector);
  20. });
  21. }
  22. function useAnimation(context, expanded, mounted, height) {
  23. const animation = wx.createAnimation({
  24. duration: 0,
  25. timingFunction: 'ease-in-out',
  26. });
  27. if (expanded) {
  28. if (height === 0) {
  29. animation.height('auto').top(1).step();
  30. }
  31. else {
  32. animation
  33. .height(height)
  34. .top(1)
  35. .step({
  36. duration: mounted ? 300 : 1,
  37. })
  38. .height('auto')
  39. .step();
  40. }
  41. context.setData({
  42. animation: animation.export(),
  43. });
  44. return;
  45. }
  46. animation.height(height).top(0).step({ duration: 1 }).height(0).step({
  47. duration: 300,
  48. });
  49. context.setData({
  50. animation: animation.export(),
  51. });
  52. }
  53. export function setContentAnimate(context, expanded, mounted) {
  54. getRect(context, '.van-collapse-item__content')
  55. .then((rect) => rect.height)
  56. .then((height) => {
  57. canIUseAnimate()
  58. ? useAnimate(context, expanded, mounted, height)
  59. : useAnimation(context, expanded, mounted, height);
  60. });
  61. }