遇到报错 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>
解决问题（贼烦官方文档也不写清楚）
