关于小程序组件 slot 在没有兄弟节点时,动画表现异常的情况,是否为bug,还是feature?
<view
class="fixed_dialog_wrap"
catchtouchmove="catchtouchmove"
style="z-index:{{zIndex}}"
wx:if="{{_visible}}"
>
<view class="dialog_wrap">
<view
class="mask"
style="background-color:{{maskBackgroundColor}};"
catchtap="{{maskClosable?'onClose':''}}"
></view>
<view
class="dialog {{bottom?'bottom':''}}"
style="{{style}};"
>
<slot></slot>
<text style="display: none;"></text>
</view>
</view>
</view>
observers: {
visible (new_val) {
const _that = this
const { bottom, maskVisible } = _that.data
const style_visible = bottom
? 'transform:translateY(0)'
: 'opacity:1;transform:scale(1);'
const style_unvisible = bottom
? 'transform:translateY(120%)'
: 'opacity:0;transform:scale(0);'
clearTimeout(_that.data.timer_close)
if (new_val) {
_that.setData({ _visible: true }, () => {
_that.setData({
maskBackgroundColor: maskVisible
? 'rgba(0,0,0,0.6)'
: 'transparent',
style: style_visible
})
})
} else {
_that.setData({
maskBackgroundColor: 'rgba(0,0,0,0)',
style: style_unvisible
})
const timer_close = setTimeout(() => {
_that.setData({ _visible: false })
}, 300)
_that.setData({ timer_close })
}
}
}
问题:slot 有兄弟节点,有动画;slot 无兄弟节点,大概率触发不了动画。
注意 slot下的 <text style=“display: none;”></text> 。在编写该弹层组件时,如果 slot 同级没有兄弟节点,当蒙层展示时,节点挂载顺序如下:
.dialog 先挂载 => 开始动画 => slot 内容填充,注意由于 .dialog 挂载时其没有子节点,于是动画的作用对象为空,所以动画开始了个寂寞。
而 slot 内容填充之后,动画已经在这之前开始加载了,所以此时,无动画,进而表现为,slot 在没有兄弟节点的情况下 .dialog 的动画及其难以触发(还是会有极小概率触发,猜测是因为小程序渲染层节点挂载规与逻辑层JS执行顺序导致)。
如果 slot 同级有兄弟节点,兄弟节点就会让 .dialog 有了动画作用对象,不至于开始个寂寞。
请问小程序官方,这算是bug吗,单独就这个问题而言。(不要跟我说用小程序的animation来实现动画,实现了会没办法将小程序组件转化为Vue组件)