vue-app-sdk/dist/plugins/Animation/Animation.js

Vue App SDK.

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { ref, toValue, nextTick } from "vue";
import "../../vendors/nice-fns/dist/compactObject.js";
import "../../vendors/nice-fns/dist/pascalCase.js";
import "vue-router";
import "../../vendors/easy-hookable/dist/callers.js";
import "../../vendors/easy-hookable/dist/ContextHelper.js";
import { NavigationDirection } from "../../core/Router.js";
import "../Tabs/Tabs.js";
const ANIMATION_ID = Symbol("animation");
class Animation {
  constructor(options = {}) {
    __publicField(this, "id", ANIMATION_ID);
    /**
     * 是否在路由导航后自动延迟启用动画
     */
    __publicField(this, "_isAutoEnabled", true);
    /**
     * 动画启用状态
     */
    __publicField(this, "_isEnabled", ref(true));
    /**
     * 当前使用的动画名称
     */
    __publicField(this, "_animationName", ref(this.forwardName));
    /**
     * 设置是否在路由导航后自动延迟启用动画状态
     * @param value 状态值
     */
    __publicField(this, "setAutoEnabled", (value) => {
      this._isAutoEnabled = value;
    });
    /**
     * 设置动画启用状态
     * @param value 状态值
     */
    __publicField(this, "setEnabled", (value) => {
      this._isEnabled.value = value;
    });
    /**
     * 启用动画
     */
    __publicField(this, "enable", () => {
      this.setEnabled(true);
    });
    /**
     * 禁用动画
     *
     * ***注意：禁用时需设置 {@link https://cn.vuejs.org/api/built-in-components.html#transition Transition} 组件的 `css` 属性为 `false`，否则会影响切换效果！***
     */
    __publicField(this, "disable", () => {
      this.setEnabled(false);
    });
    __publicField(this, "install", (sdk) => {
      sdk.hook("sdk:router:navigate", (direction) => {
        this._animationName.value = direction === NavigationDirection.backward ? this.backwardName : this.forwardName;
        if (this._isAutoEnabled)
          nextTick(() => this.enable());
      });
      return () => {
        this._isAutoEnabled = true;
        this._isEnabled.value = true;
        this._animationName.value = this.forwardName;
      };
    });
    this.options = options;
  }
  /**
   * 是否在路由导航后自动延迟启用动画
   * @readonly
   */
  get isAutoEnabled() {
    return this._isAutoEnabled;
  }
  /**
   * 动画启用状态
   * @readonly
   */
  get isEnabled() {
    return this._isEnabled.value;
  }
  /**
   * 路由导航时的动画名称，禁用动画时将返回 `undefined`
   */
  get name() {
    return this.isEnabled ? this._animationName.value : void 0;
  }
  /**
   * 前进动画名称
   * @readonly
   */
  get forwardName() {
    return toValue(this.options.forwardName) || "forward";
  }
  /**
   * 后退动画名称
   * @readonly
   */
  get backwardName() {
    return toValue(this.options.backwardName) || "backward";
  }
}
export {
  ANIMATION_ID,
  Animation
};