Javascript 反应淡入元素

我有一个

Basket

组件，单击该组件时需要切换

BasketContents

组件。这项工作：

constructor() {
    super();
    this.state = {
      open: false
    }
    this.handleDropDown = this.handleDropDown.bind(this);
  }
  handleDropDown() {
    this.setState({ open: !this.state.open })
  }
    render() {
        return(
            <div className="basket">
                <button className="basketBtn" onClick={this.handleDropDown}>
                    Open
                </button>
              {
                this.state.open
                ?
                <BasketContents />
                : null
              }
            </div>
        )
    }

constructor（）{
超级（）；
此.state={
开放：假
}
this.handleDropDown=this.handleDropDown.bind（this）；
}
handleDropDown（）{
this.setState（{open:！this.state.open}）
}
render（）{
返回(
打开
{
这个州是开放的
?
：null
}
)
}

---

它使用条件来显示或不显示

BasketContents

组件。我现在想让它淡入。我尝试在

BasketContents

中添加一个

ComponentDidMount

钩子来转换不透明度，但这不起作用。有没有一种简单的方法可以做到这一点？

我会使用如下反应动作：

<Motion style={{currentOpacity: spring(this.state.open ? 1 : 0, { stiffness: 140, damping: 20 })}}>
    {({currentOpacity}) =>
        <div style={{opacity: currentOpacity}}>
            <BasketContents />
        </div>
    }
</Motion>

{（{currentOpacity}）=>
}

---

我还没有测试过它，但它应该可以工作。

使用css类切换+不透明度转换的示例：

以下是有趣的CSS：

.basket {
  transition: opacity 0.5s;
  opacity: 1;
}
.basket.hide {
  opacity: 0;
  pointer-events:none;
}

和渲染功能：

render() {
    const classes = this.state.open ? 'basket' : 'basket hide'
    return(
      <div className="basket">
        <button className="basketBtn" onClick={this.handleDropDown}>
          {this.state.open ? 'Close' : 'Open'}
        </button>
        <BasketContents className={classes}/>
      </div>
    )
  }

render（）{
const classes=this.state.open？'basket'：'basket hide'
返回(
{this.state.open？'Close'：'open'}
)
}

我这样做是为了一个移动菜单汉堡按钮，用于扩展和关闭导航。我想继续渲染内容，但只想在每次打开/关闭菜单时平滑过渡。这是我的解决方案。在ComponentDidMount（）和每个菜单上，汉堡按钮单击并关闭按钮单击我将不透明度设置为0，并在setTimeout中等待1毫秒，然后添加转换：

    handleMenuExpand = () => {
        this.handleTransition(false);
    }
    handleMenuShrink = () => {
        this.handleTransition(true);
    }
    handleTransition = (isHidden) => {
        this.setState({
            transitionStyle: {
                opacity: '0'
            },
            isNavHidden: isHidden
        });
        setTimeout(() => this.setState({
                transitionStyle: {
                    transition: 'opacity 0.8s',
                    opacity: '1'
                }
            }), 1
        );
    }
    componentDidMount() {
        this.handleTransition(this._isMobile);
    }
    return(
        <nav className="navbar-container" style={this.state.transitionStyle}>
            { (this.state.isNavHidden) ?
                <ul className="navbar-content">
                    <li className="menu-expand-container" style={topBarStyle} >
                        <img
                            src={MenuHamburgerPic}
                            style={menuButtonStyle}
                            alt="Menu Pic"
                            onClick={this.handleMenuExpand}
                          />
                      </li>
                </ul>
             :
                <ul className="navbar-content">
                    {(this._isMobile) &&
                        <li style={closeButtonContainerStyle} >
                            <img
                                src={MenuClosePic}
                                style={closeMenuButtonStyle}
                                alt="Menu Pic"
                                onClick={this.handleMenuShrink}
                            />
                        </li>
                    }
                    <li>NAV ELEMENT 1</li>
                                    
                    <li>AOTHER NAV ELEMENT</li>
                </ul>
            }
        </nav>
    );

handleMenuExpand=（）=>{
本.HandletTransition（假）；
}
handleMenuShrink=（）=>{
此.handleTransition（true）；
}
HandletTransition=（isHidden）=>{
这是我的国家({
过渡方式：{
不透明度：“0”
},
isNavHidden:isHidden
});
setTimeout（（）=>this.setState({
过渡方式：{
过渡：“不透明度0.8s”，
不透明度：“1”
}
}), 1
);
}
componentDidMount（）{
这个.handleTransition（这个._isMobile）；
}
返回(
{（this.state.isNavHidden）？




:

{（这个._isMobile）&&


}
导航要素1
AOTHER导航元件

}
);

对于

，您的

渲染的
是什么样子的？我不会使用三元来渲染
而是使用
this.state
来设置具有不透明度/可见性转换的类名。您可以使用这个-您是否有消息来源说ReactTransitionGroup将被弃用？它最初在这里的弃用列表中，但现在看起来（根据讨论）他们决定保留它并重写它……我刚刚删除了那句话：——）你的小提琴似乎不再管用了。你能用代码沙盒做一个吗？例如