animate.js 2.1KB

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