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

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">&nbsp; <div className="col-11">&nbsp; &nbsp; &nbsp;Text here&nbsp; </div>&nbsp; <div className="col-1">&nbsp; &nbsp; X&nbsp; </div></div>第二个问题可以使用条件应用类来解决。&nbsp; &nbsp; .hiden{transform: translateX(-300px) // width of you notification containertransition: all 0.5s;}.open{transform: translateX(0);}有条件地应用上面的 css 就像<div className={`hiden ${state.open? 'open': ''}`}>

Answer 2

要使消息和关闭图标保持在同一行，您可以使用 flexbox。.message-container {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content: space-around;}.cross {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; margin: 10px;&nbsp; background-color: #d3d3d3;&nbsp; border-radius: 50%;&nbsp; width: 22px;&nbsp; height: 22px;&nbsp; text-align: center;}.message {&nbsp; display: flex;&nbsp; flex-grow: 1;&nbsp; margin: 10px;&nbsp; width: 80%;&nbsp; word-wrap: break-word;}我已将消息包裹并交叉放入一个容器中，这为它们提供了正确的布局。卡片默认关闭，然后有消息时动态应用一个card__open类.card {&nbsp; width: fit-content;&nbsp; min-width: 300px;&nbsp; padding: 10px;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; position: absolute;&nbsp; top: -50px;&nbsp; transition: top 0.5s;}.card__open {&nbsp; top: 20px;}在类名库是伟大的，哪些类应当应用动态defininingconst classes = classNames({&nbsp; &nbsp; card: true,&nbsp; &nbsp; card__open: messages.length&nbsp; });return (&nbsp; &nbsp; <div className={classes}>&nbsp; &nbsp; ...我已经创建了一个关于如何应用动画的小例子。