NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.56k stars 753 forks source link

AtDrawer组件嵌套AtFloatLayout组件,AtDrawer会闪现一下再触发动画展示 #1730

Open zhuoyu1994 opened 11 months ago

zhuoyu1994 commented 11 months ago

Taro UI 版本信息

v3.1.0-beta.4

问题描述

AtDrawer组件嵌套使用AtFloatLayout组件,AtDrawer会闪现一下再触发动画展示

"@tarojs/taro": "3.5.8"正常 "@tarojs/taro": "3.6.20"异常

复现步骤

点击AtDrawer就可

复现代码

import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import { View } from '@tarojs/components';
import { AtFloatLayout, AtDrawer } from 'taro-ui';

export default class Index extends Component {
  state = {
    isOpened: false,
    show: false
  };

  handleClose = () => {
    this.setState({
      isOpened: false
    });
  }

  handleAtDrawer = () => {
    this.setState({
      show: false
    });
  }

  render() {

    return (
      <View className='page'>
        <View onClick={() => this.setState({ show: true })}>AtDrawer</View>
        <AtDrawer show={this.state.show} right mask onClose={this.handleAtDrawer.bind(this)}>
          123
          <View onClick={() => this.setState({ isOpened: true })}>AtFloatLayout</View>
          <AtFloatLayout isOpened={this.state.isOpened} title='这是个标题' onClose={this.handleClose.bind(this)}>
            这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
            随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
          </AtFloatLayout>
        </AtDrawer>
      </View>
    );
  }
}

报错信息

无报错

系统信息

Taro CLI 3.6.20 environment info: System: OS: Windows 10 10.0.19041 Binaries: Node: 16.20.2 - D:\Program Files\nodejs\node.EXE Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.19.4 - D:\Program Files\nodejs\npm.CMD npmPackages: @tarojs/cli: 3.6.20 => 3.6.20 @tarojs/components: 3.6.20 => 3.6.20 @tarojs/helper: 3.6.20 => 3.6.20 @tarojs/plugin-framework-react: 3.6.20 => 3.6.20 @tarojs/plugin-platform-h5: 3.6.20 => 3.6.20 @tarojs/plugin-platform-weapp: 3.6.20 => 3.6.20 @tarojs/react: 3.6.20 => 3.6.20 @tarojs/router: 3.6.20 => 3.6.20 @tarojs/runtime: 3.6.20 => 3.6.20 @tarojs/shared: 3.6.20 => 3.6.20 @tarojs/taro: 3.6.20 => 3.6.20 @tarojs/taro-h5: 3.6.20 => 3.6.20 @tarojs/webpack5-runner: 3.6.20 => 3.6.20 babel-preset-taro: 3.6.20 => 3.6.20 eslint-config-taro: 3.6.20 => 3.6.20 react: 17.0.2 => 17.0.2 taro-ui: ^3.1.0-beta.4 => 3.2.0

补充信息

taro-ui-bot[bot] commented 11 months ago

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

robinv8 commented 11 months ago

先安装最新版试试,如果还有问题,麻烦提供个可复现且可运行的 demo

zhuoyu1994 commented 11 months ago

先安装最新版试试,如果还有问题,麻烦提供个可复现且可运行的 demo

已经是最新的了。 taro是3.6.20,taro-ui虽然在package.json使用的是^3.1.0-beta.4,但实际使用的也是最新的3.2.0

上面的复制代码有demo代码

robinv8 commented 11 months ago

taro-ui@3.2.0 taro@3.6.22 我测试效果如下 Mov to Gif Conversion

zhuoyu1994 commented 11 months ago

taro-ui@3.2.0 taro@3.6.22 我测试效果如下 Mov to Gif Conversion Mov to Gif Conversion

是H5有问题,前面我漏说了抱歉,我也刚验证了小程序确实没问题。

robinv8 commented 10 months ago

好的,今晚我试试