#

whycq

2023-10-13 c64064285bc6df2d5b82f3995bb9e56398cacd73

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
    <view
        v-if="inited"
        class="u-transition"
        ref="u-transition"
        @tap="clickHandler"
        :class="classes"
        :style="[mergeStyle]"
        @touchmove="noop"
    >
        <slot />
    </view>
</template>
 
<script>
import props from './props.js';
// 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
import transition from "./transition.js";
/**
 * transition  动画组件
 * @description
 * @tutorial
 * @property {String}            show            是否展示组件 （默认 false ）
 * @property {String}            mode            使用的动画模式 （默认 'fade' ）
 * @property {String | Number}    duration        动画的执行时间，单位ms （默认 '300' ）
 * @property {String}            timingFunction    使用的动画过渡函数 （默认 'ease-out' ）
 * @property {Object}            customStyle        自定义样式
 * @event {Function} before-enter    进入前触发
 * @event {Function} enter            进入中触发
 * @event {Function} after-enter    进入后触发
 * @event {Function} before-leave    离开前触发
 * @event {Function} leave            离开中触发
 * @event {Function} after-leave    离开后触发
 * @example
 */
export default {
    name: 'u-transition',
    data() {
        return {
            inited: false, // 是否显示/隐藏组件
            viewStyle: {}, // 组件内部的样式
            status: '', // 记录组件动画的状态
            transitionEnded: false, // 组件是否结束的标记
            display: false, // 组件是否展示
            classes: '', // 应用的类名
        }
    },
    computed: {
        mergeStyle() {
            const { viewStyle, customStyle } = this
            return {
                // #ifndef APP-NVUE
                transitionDuration: `${this.duration}ms`,
                // display: `${this.display ? '' : 'none'}`,
                transitionTimingFunction: this.timingFunction,
                // #endif
                // 避免自定义样式影响到动画属性，所以写在viewStyle前面
                ...uni.$u.addStyle(customStyle),
                ...viewStyle
            }
        }
    },
    // 将mixin挂在到组件中，uni.$u.mixin实际上为一个vue格式对象
    mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props],
    watch: {
        show: {
            handler(newVal) {
                // vue和nvue分别执行不同的方法
                // #ifdef APP-NVUE
                newVal ? this.nvueEnter() : this.nvueLeave()
                // #endif
                // #ifndef APP-NVUE
                newVal ? this.vueEnter() : this.vueLeave()
                // #endif
            },
            // 表示同时监听初始化时的props的show的意思
            immediate: true
        }
    }
}
</script>
 
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
 
/* #ifndef APP-NVUE */
// vue版本动画相关的样式抽离在外部文件
@import './vue.ani-style.scss';
/* #endif */
 
.u-transition {}
</style>