javascript - 实现自定义滑动通知的 react 组件

Question

我正在编写一个 SimpleNotification 组件，它会在调用 show() 时滑入 View ，并在调用 dismiss() 时滑出.

目前，我有两个问题。

首先，我希望消息和十字按钮位于同一行，即使消息溢出。十字按钮应始终位于消息的右侧。十字按钮应该是圆形的并且其内容居中。

第二个问题是在调用show()或dismiss()时不知道如何添加滑动动画(这是过渡动画吗？)。所以现在我暂时用一个bool visible 来控制它的可见性，而不是让它滑进滑出。

我怎样才能达到我想要的？提前致谢!

在我目前的尝试中，我是前端及以下的新手。

class SimpleNotification extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
        this.style = {
            card: {
                width: "fit-content",
                minWidth: "300px",
                padding: "10px",
                boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
                float: "right",
            },
            cross: {
                display: "inline",
                margin: "10px",
                backgroundColor: "#D3D3D3",
                borderRadius: "50%",
                width: "22px",
                height: "22px",
                textAlign: "center"
            },
            message: {
                display: "inline",
                margin: "10px",
                width: "80%",
                wordWrap: "break-word",
            },
            transition: {
                transition: "all 0.5s linear"
            },
        }
        // Replace existing notification
        this.call_stack = []
    }

    show(message = "", duration = 2000){
        // transition: width 2s, height 4s;
        this.call_stack.push({message: message, duration: duration})
        let count = this.call_stack.length
        this.setState({visible: true, message})
        setTimeout(() => {
            if (this.call_stack.length == count)
                this.dismiss()
            this.call_stack.splice(count - 1, 1)
        }, 10000000)
    }

    dismiss(){
        this.setState({visible: false})
    }

    render() {
      const {visible, message} = this.state
      return visible ? <div id={this.props.id} style={this.style.card}>
          <p style={this.style.message}>{message}</p>
          <p style={this.style.cross} onClick={this.dismiss.bind(this)}>×</p>
      </div> : null
    }
  }

Answer 1

第一个问题可以通过将 x 放在不同的 div 中来解决

<div className="row">
  <div className="col-11">
     Text here
  </div>
  <div className="col-1">
    X
  </div>
</div>

第二个问题可以使用有条件的应用类来解决。

    .hiden{
transform: translateX(-300px) // width of you notification container
transition: all 0.5s;
}

.open{
transform: translateX(0);
}

有条件地应用上面的css

<div className={`hiden ${state.open? 'open': ''}`}>