tdesign-vue/esm/message/animation.js

tdesign-vue

/**
 * tdesign v1.12.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { PLACEMENT_LIST } from './const.js';

var ANIMATION_OPTION = {
  duration: 200,
  easing: "linear"
};
function fadeIn(dom, placement) {
  if (!dom) return;
  var offsetWidth = (dom === null || dom === void 0 ? void 0 : dom.offsetWidth) || 0;
  var offsetHeight = (dom === null || dom === void 0 ? void 0 : dom.offsetHeight) || 0;
  var fadeInKeyframes = getFadeInKeyframes(placement, offsetWidth, offsetHeight);
  if (!fadeInKeyframes) return;
  var styleAfterFadeIn = fadeInKeyframes[fadeInKeyframes.length - 1];
  setDomStyleAfterAnimation(dom, styleAfterFadeIn);
  dom.animate && dom.animate(fadeInKeyframes, ANIMATION_OPTION);
}
function fadeOut(dom, placement, onFinish) {
  if (!dom) return;
  var offsetHeight = (dom === null || dom === void 0 ? void 0 : dom.offsetHeight) || 0;
  var fadeOutKeyframes = getFadeOutKeyframes(placement, offsetHeight);
  if (!fadeOutKeyframes) return onFinish();
  var styleAfterFadeOut = fadeOutKeyframes[fadeOutKeyframes.length - 1];
  setDomStyleAfterAnimation(dom, styleAfterFadeOut);
  var animation = dom.animate && dom.animate(fadeOutKeyframes, ANIMATION_OPTION);
  if (animation) {
    animation.onfinish = function () {
      dom.style.display = "none";
      onFinish();
    };
  } else {
    dom.style.display = "none";
    onFinish();
  }
}
function setDomStyleAfterAnimation(dom, styleAfterAnimation) {
  var keys = Object.keys(styleAfterAnimation);
  for (var i = 0; i < keys.length; i += 1) {
    var key = keys[i];
    dom.style[key] = styleAfterAnimation[key];
  }
}
function getFadeInKeyframes(placement, offsetWidth, offsetHeight) {
  if (!PLACEMENT_LIST.includes(placement)) return null;
  if (["top-left", "left", "bottom-left"].includes(placement)) {
    return [{
      opacity: 0,
      marginLeft: "-".concat(offsetWidth, "px")
    }, {
      opacity: 1,
      marginLeft: "0"
    }];
  }
  if (["top-right", "right", "bottom-right"].includes(placement)) {
    return [{
      opacity: 0,
      marginRight: "-".concat(offsetWidth, "px")
    }, {
      opacity: 1,
      marginRight: "0"
    }];
  }
  if (["top", "center"].includes(placement)) {
    return [{
      opacity: 0,
      marginTop: "-".concat(offsetHeight, "px")
    }, {
      opacity: 1,
      marginTop: "0"
    }];
  }
  if (["bottom"].includes(placement)) {
    return [{
      opacity: 0,
      transform: "translate3d(0, ".concat(offsetHeight, "px, 0)")
    }, {
      opacity: 1,
      transform: "translate3d(0, 0, 0)"
    }];
  }
}
function getFadeOutKeyframes(placement, offsetHeight) {
  if (!PLACEMENT_LIST.includes(placement)) return null;
  if (["bottom-left", "bottom", "bottom-right"].includes(placement)) {
    var marginOffset2 = "".concat(offsetHeight, "px");
    return [{
      opacity: 1,
      marginTop: "0px"
    }, {
      opacity: 0,
      marginTop: marginOffset2
    }];
  }
  var marginOffset = "-".concat(offsetHeight, "px");
  return [{
    opacity: 1,
    marginTop: "0px"
  }, {
    opacity: 0,
    marginTop: marginOffset
  }];
}

export { fadeIn, fadeOut };
//# sourceMappingURL=animation.js.map