jzmall_uni/lib/vant-weapp/mixins/transition.js

import { isObj } from '../common/utils';
const getClassNames = (name) => ({
    enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
    'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
    leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
    'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`
});
const nextTick = () => new Promise((resolve) => setTimeout(resolve, 33.333333333333336));
export const transition = function (showDefaultValue) {
    return {
        data() {
            return {
                type: '',
                inited: false,
                display: false
            };
        },
        props: {
            customStyle: String,
            // @ts-ignore
            show: {
                type: Boolean,
                value: showDefaultValue,
                observer: 'observeShow'
            },
            // @ts-ignore
            duration: {
                type: null,
                value: 300,
                observer: 'observeDuration'
            },
            name: {
                type: String,
                value: 'fade'
            }
        },
        beforeMount() {
            if (this.show) {
                this.enter();
            }
        },
        methods: {
            observeShow(value) {
                if (value) {
                    this.enter();
                } else {
                    this.leave();
                }
            },
            enter() {
                const { duration, name } = this;
                const classNames = getClassNames(name);
                const currentDuration = isObj(duration) ? duration.enter : duration;
                this.status = 'enter';
                this.$emit('before-enter');
                Promise.resolve()
                    .then(nextTick)
                    .then(() => {
                        this.checkStatus('enter');
                        this.$emit('enter');
                        this.setData({
                            inited: true,
                            display: true,
                            classes: classNames.enter,
                            currentDuration
                        });
                    })
                    .then(nextTick)
                    .then(() => {
                        this.checkStatus('enter');
                        this.transitionEnded = false;
                        this.setData({
                            classes: classNames['enter-to']
                        });
                    })
                    .catch(() => {});
            },
            leave() {
                if (!this.display) {
                    return;
                }
                const { duration, name } = this;
                const classNames = getClassNames(name);
                const currentDuration = isObj(duration) ? duration.leave : duration;
                this.status = 'leave';
                this.$emit('before-leave');
                Promise.resolve()
                    .then(nextTick)
                    .then(() => {
                        this.checkStatus('leave');
                        this.$emit('leave');
                        this.setData({
                            classes: classNames.leave,
                            currentDuration
                        });
                    })
                    .then(nextTick)
                    .then(() => {
                        this.checkStatus('leave');
                        this.transitionEnded = false;
                        setTimeout(() => this.onTransitionEnd(), currentDuration);
                        this.setData({
                            classes: classNames['leave-to']
                        });
                    })
                    .catch(() => {});
            },
            checkStatus(status) {
                if (status !== this.status) {
                    throw new Error(`incongruent status: ${status}`);
                }
            },
            onTransitionEnd() {
                if (this.transitionEnded) {
                    return;
                }
                this.transitionEnded = true;
                this.$emit(`after-${this.status}`);
                const { show, display } = this;
                if (!show && display) {
                    this.setData({
                        display: false
                    });
                }
            }
        }
    };
};