实现自定义滑动通知的反应组件

Question

我正在编写一个SimpleNotification组件，它会在show()被调用时滑入视图并在被调用时滑出dismiss()。目前，我有两个问题。首先，我希望消息和十字按钮在同一行，即使消息溢出。十字按钮应始终位于消息的右侧。十字按钮应该是圆形的并且其内容居中。第二个问题是我不知道如何在show()或被dismiss()调用时添加滑动动画（这是过渡动画吗？）。所以现在我暂时使用 boolvisible来控制它的可见性，而不是让它滑进滑出。我怎样才能达到我想要的？提前致谢！在我目前的尝试中，我是前端及以下的新手。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})    }

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': ''}`}>

Answer 2

要使消息和关闭图标保持在同一行，您可以使用 flexbox。

.message-container {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

.cross {

  display: flex;

  justify-content: center;

  margin: 10px;

  background-color: #d3d3d3;

  border-radius: 50%;

  width: 22px;

  height: 22px;

  text-align: center;

}

.message {

  display: flex;

  flex-grow: 1;

  margin: 10px;

  width: 80%;

  word-wrap: break-word;

}

我已将消息包裹并交叉放入一个容器中，这为它们提供了正确的布局。

卡片默认关闭，然后有消息时动态应用一个card__open类

.card {

  width: fit-content;

  min-width: 300px;

  padding: 10px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  position: absolute;

  top: -50px;

  transition: top 0.5s;

}

.card__open {

  top: 20px;

}

在类名库是伟大的，哪些类应当应用动态definining

const classes = classNames({

    card: true,

    card__open: messages.length

  });

return (

    <div className={classes}>

    ...

我已经创建了一个关于如何应用动画的小例子。