style.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. // Binding `requestAnimationFrame` like this fixes a bug in IE/Edge. See #360 and #409.
  2. const raf = typeof (window === null || window === void 0 ? void 0 : window.requestAnimationFrame) === "function"
  3. ? window.requestAnimationFrame.bind(window)
  4. : setTimeout;
  5. const nextFrame = function (fn) {
  6. raf(function () {
  7. raf(fn);
  8. });
  9. };
  10. let reflowForced = false;
  11. function setNextFrame(obj, prop, val) {
  12. nextFrame(function () {
  13. obj[prop] = val;
  14. });
  15. }
  16. function updateStyle(oldVnode, vnode) {
  17. let cur;
  18. let name;
  19. const elm = vnode.elm;
  20. let oldStyle = oldVnode.data.style;
  21. let style = vnode.data.style;
  22. if (!oldStyle && !style)
  23. return;
  24. if (oldStyle === style)
  25. return;
  26. oldStyle = oldStyle || {};
  27. style = style || {};
  28. const oldHasDel = "delayed" in oldStyle;
  29. for (name in oldStyle) {
  30. if (!(name in style)) {
  31. if (name[0] === "-" && name[1] === "-") {
  32. elm.style.removeProperty(name);
  33. }
  34. else {
  35. elm.style[name] = "";
  36. }
  37. }
  38. }
  39. for (name in style) {
  40. cur = style[name];
  41. if (name === "delayed" && style.delayed) {
  42. for (const name2 in style.delayed) {
  43. cur = style.delayed[name2];
  44. if (!oldHasDel || cur !== oldStyle.delayed[name2]) {
  45. setNextFrame(elm.style, name2, cur);
  46. }
  47. }
  48. }
  49. else if (name !== "remove" && cur !== oldStyle[name]) {
  50. if (name[0] === "-" && name[1] === "-") {
  51. elm.style.setProperty(name, cur);
  52. }
  53. else {
  54. elm.style[name] = cur;
  55. }
  56. }
  57. }
  58. }
  59. function applyDestroyStyle(vnode) {
  60. let style;
  61. let name;
  62. const elm = vnode.elm;
  63. const s = vnode.data.style;
  64. if (!s || !(style = s.destroy))
  65. return;
  66. for (name in style) {
  67. elm.style[name] = style[name];
  68. }
  69. }
  70. function applyRemoveStyle(vnode, rm) {
  71. const s = vnode.data.style;
  72. if (!s || !s.remove) {
  73. rm();
  74. return;
  75. }
  76. if (!reflowForced) {
  77. // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  78. vnode.elm.offsetLeft;
  79. reflowForced = true;
  80. }
  81. let name;
  82. const elm = vnode.elm;
  83. let i = 0;
  84. const style = s.remove;
  85. let amount = 0;
  86. const applied = [];
  87. for (name in style) {
  88. applied.push(name);
  89. elm.style[name] = style[name];
  90. }
  91. const compStyle = getComputedStyle(elm);
  92. const props = compStyle["transition-property"].split(", ");
  93. for (; i < props.length; ++i) {
  94. if (applied.indexOf(props[i]) !== -1)
  95. amount++;
  96. }
  97. elm.addEventListener("transitionend", function (ev) {
  98. if (ev.target === elm)
  99. --amount;
  100. if (amount === 0)
  101. rm();
  102. });
  103. }
  104. function forceReflow() {
  105. reflowForced = false;
  106. }
  107. export const styleModule = {
  108. pre: forceReflow,
  109. create: updateStyle,
  110. update: updateStyle,
  111. destroy: applyDestroyStyle,
  112. remove: applyRemoveStyle
  113. };
  114. //# sourceMappingURL=style.js.map