yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/uni-transition/uni-transition.vue

<template>
    <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]"
          :style="'transform:' +transform+';'+stylesObject"
          @click="change">
        <slot></slot>
    </view>
</template>

<script>
    // #ifdef APP-NVUE
    const animation = uni.requireNativePlugin('animation');
    // #endif
    /**
     * Transition 过渡动画
     * @description 简单过渡动画组件
     * @tutorial https://ext.dcloud.net.cn/plugin?id=985
     * @property {Boolean} show = [false|true] 控制组件显示或隐藏
     * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
     *  @value fade 渐隐渐出过渡
     *  @value slide-top 由上至下过渡
     *  @value slide-right 由右至左过渡
     *  @value slide-bottom 由下至上过渡
     *  @value slide-left 由左至右过渡
     *  @value zoom-in 由小到大过渡
     *  @value zoom-out 由大到小过渡
     * @property {Number} duration 过渡动画持续时间
     * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
     */
    export default {
        name: 'uniTransition',
        props: {
            show: {
                type: Boolean,
                default: false
            },
            modeClass: {
                type: Array,
                default() {
                    return []
                }
            },
            duration: {
                type: Number,
                default: 300
            },
            styles: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                isShow: false,
                transform: '',
                ani: {
                    in: '',
                    active: ''
                }
            };
        },
        watch: {
            show: {
                handler(newVal) {
                    if (newVal) {
                        this.open()
                    } else {
                        this.close()
                    }
                },
                immediate: true
            }
        },
        computed: {
            stylesObject() {
                let styles = {
                    ...this.styles,
                    'transition-duration': this.duration / 1000 + 's'
                }
                let transfrom = ''
                for (let i in styles) {
                    let line = this.toLine(i)
                    transfrom += line + ':' + styles[i] + ';'
                }
                return transfrom
            }
        },
        created() {
            // this.timer = null
            // this.nextTick = (time = 50) => new Promise(resolve => {
            // 	clearTimeout(this.timer)
            // 	this.timer = setTimeout(resolve, time)
            // 	return this.timer
            // });
        },
        methods: {
            change() {
                this.$emit('click', {
                    detail: this.isShow
                })
            },
            open() {
                clearTimeout(this.timer)
                this.isShow = true
                this.transform = ''
                this.ani.in = ''
                for (let i in this.getTranfrom(false)) {
                    if (i === 'opacity') {
                        this.ani.in = 'fade-in'
                    } else {
                        this.transform += `${this.getTranfrom(false)[i]} `
                    }
                }
                this.$nextTick(() => {
                    setTimeout(() => {
                        this._animation(true)
                    }, 50)
                })

            },
            close(type) {
                clearTimeout(this.timer)
                this._animation(false)
            },
            _animation(type) {
                let styles = this.getTranfrom(type)
                // #ifdef APP-NVUE
                if (!this.$refs['ani']) return
                animation.transition(this.$refs['ani'].ref, {
                    styles,
                    duration: this.duration, //ms
                    timingFunction: 'ease',
                    needLayout: false,
                    delay: 0 //ms
                }, () => {
                    if (!type) {
                        this.isShow = false
                    }
                    this.$emit('change', {
                        detail: this.isShow
                    })
                })
                // #endif
                // #ifndef APP-NVUE
                this.transform = ''
                for (let i in styles) {
                    if (i === 'opacity') {
                        this.ani.in = `fade-${type ? 'out' : 'in'}`
                    } else {
                        this.transform += `${styles[i]} `
                    }
                }
                this.timer = setTimeout(() => {
                    if (!type) {
                        this.isShow = false
                    }
                    this.$emit('change', {
                        detail: this.isShow
                    })

                }, this.duration)
                // #endif

            },
            getTranfrom(type) {
                let styles = {
                    transform: ''
                }
                this.modeClass.forEach((mode) => {
                    switch (mode) {
                        case 'fade':
                            styles.opacity = type ? 1 : 0
                            break;
                        case 'slide-top':
                            styles.transform += `translateY(${type ? '0' : '-100%'}) `
                            break;
                        case 'slide-right':
                            styles.transform += `translateX(${type ? '0' : '100%'}) `
                            break;
                        case 'slide-bottom':
                            styles.transform += `translateY(${type ? '0' : '100%'}) `
                            break;
                        case 'slide-left':
                            styles.transform += `translateX(${type ? '0' : '-100%'}) `
                            break;
                        case 'zoom-in':
                            styles.transform += `scale(${type ? 1 : 0.8}) `
                            break;
                        case 'zoom-out':
                            styles.transform += `scale(${type ? 1 : 1.2}) `
                            break;
                    }
                })
                return styles
            },
            _modeClassArr(type) {
                let mode = this.modeClass
                if (typeof (mode) !== "string") {
                    let modestr = ''
                    mode.forEach((item) => {
                        modestr += (item + '-' + type + ',')
                    })
                    return modestr.substr(0, modestr.length - 1)
                } else {
                    return mode + '-' + type
                }
            },
            // getEl(el) {
            // 	console.log(el || el.ref || null);
            // 	return el || el.ref || null
            // },
            toLine(name) {
                return name.replace(/([A-Z])/g, "-$1").toLowerCase();
            }
        }
    }
</script>

<style>
    .uni-transition {
        transition-timing-function: ease;
        transition-duration: 0.3s;
        transition-property: transform, opacity;
    }

    .fade-in {
        opacity: 0;
    }

    .fade-active {
        opacity: 1;
    }

    .slide-top-in {
        /* transition-property: transform, opacity; */
        transform: translateY(-100%);
    }

    .slide-top-active {
        transform: translateY(0);
        /* opacity: 1; */
    }

    .slide-right-in {
        transform: translateX(100%);
    }

    .slide-right-active {
        transform: translateX(0);
    }

    .slide-bottom-in {
        transform: translateY(100%);
    }

    .slide-bottom-active {
        transform: translateY(0);
    }

    .slide-left-in {
        transform: translateX(-100%);
    }

    .slide-left-active {
        transform: translateX(0);
        opacity: 1;
    }

    .zoom-in-in {
        transform: scale(0.8);
    }

    .zoom-out-active {
        transform: scale(1);
    }

    .zoom-out-in {
        transform: scale(1.2);
    }
</style>