关于小程序组件 slot 在没有兄弟节点时,动画表现异常的情况,是否为bug,还是feature?
发布于 5 年前 作者 xgong 12799 次浏览 来自 官方Issues
<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组件)

回到顶部