@daysnap/vue-use/es/useTransitionName/index.js

daysnap vue hooks

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const KEY = '$$useTransitionName__state';
const get = () => {
    let res;
    try {
        res = JSON.parse(window.sessionStorage.getItem(KEY));
    }
    catch (_a) {
        //
    }
    return res;
};
const set = (state) => {
    window.sessionStorage.setItem(KEY, JSON.stringify(state));
};
/**
 * 配合 Transition 动画
 */
export function useTransitionName(options) {
    const { deep } = options;
    const name = ref('');
    const route = useRoute();
    watch(() => (Object.assign({}, route)), (to, from) => {
        const { position } = history.state || {};
        const prevState = get();
        if (prevState && prevState.fullPath !== to.fullPath) {
            if (position >= prevState.position) {
                const { enterClass } = Object.assign({}, options, to.meta, to.query);
                name.value = enterClass !== null && enterClass !== void 0 ? enterClass : '';
            }
            else {
                const { leaveClass } = Object.assign({}, options, from.meta, from.query);
                name.value = leaveClass !== null && leaveClass !== void 0 ? leaveClass : '';
            }
        }
        else {
            name.value = '';
        }
        set({ fullPath: to.fullPath, position });
    }, {
        deep,
    });
    return name;
}