tdesign-vue/cjs/message/animation.js

tdesign-vue

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var message_const = require('./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 (!message_const.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 (!message_const.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
  }];
}

exports.fadeIn = fadeIn;
exports.fadeOut = fadeOut;
//# sourceMappingURL=animation.js.map