<template>
    <view style="margin-top: 200px;">
        <button type="primary" @click="open">fade</button>
        <uni-transition :duration="2000" :mode-class="modeClass"  :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: true,
			modeClass: 'fade',
        }
    },
    onLoad() {},
    methods: {
        open(mode) {
            this.show = !this.show
			this.modeClass = "slide-top"
        },
        change() {
            console.log('触发动画')
        }
    }
}
</script>