被uni-transition 过渡无语到

遇到报错 this.modeClass.forEach is not a function
原先代码

<template>
	<div style="width:750rpx; height:700px; background-color:#fff;">
		<view>
			<button type="primary" @click="open(fade)">fade</button>
		</view>
		
		<uni-transition 
			:mode-class="modeClass" 
			:styles="{'width':'100px','height':'100px','backgroundColor':'red'}" 
			:show="transShow" 
			:duration="200" >
		</uni-transition>
	</div>
</template>

<script>
export default {
	data() {
		return {
			transShow: true,
			modeClass:'fade',
		}
	},
	onLoad() {},
	methods: {
		open(mode) {
			this.transShow = !this.transShow
		},
		change() {
			console.log('触发动画')
		}
	}
}
</script>
//就会报错  this.modeClass.forEach is not a function`

但是如果写为 这样就不会报错  但是！ 没有动画效果 div是直接隐藏显示的
<uni-transition 
		:mode-class="fade" 
		:styles="{'width':'100px','height':'100px','backgroundColor':'red'}" 
		:show="transShow" 
		:duration="200" >
	</uni-transition>

修改后代码：

<template>
	<div style="width:750rpx; height:700px; background-color:#fff;">
		<view>
			<button type="primary" @click="open(['fade'])">fade</button>
		</view>
		
		<uni-transition 
			:mode-class="modeClass" 
			:styles="{'width':'100px','height':'100px','backgroundColor':'red'}" 
			:show="transShow" 
			:duration="200" >
		</uni-transition>
	</div>
</template>

<script>
export default {
	data() {
		return {
			transShow: true,
			modeClass: ['fade'],
		}
	},
	onLoad() {},
	methods: {
		open(mode) {
			this.modeClass = mode;
			this.transShow = !this.transShow
		},
		change() {
			console.log('触发动画')
		}
	}
}
</script>

解决问题（贼烦官方文档也不写清楚）