css - 在表单提交上显示元素

Question

我正在使用 nodemailer 将内容从表单转发到电子邮件地址。当用户单击“提交”按钮时，我希望“消息已发送”出现在表单下方。所以我这样做了:

    transporter.sendMail(info, (error, info) => {
        if(error){
            return console.log(error)
        }
        console.log('Message sent %s', info.messageId)
        res.render('contact', {msg: "message sent"})

    })

.sent-message{
    background-color: rgba(0, 130, 0, 0.23);
    color: #005000;
    padding: 1em;
    border-radius: 5px;
    text-align: center;
}

 <p class="full sent-message">{{{msg}}}</p>

现在一切正常，只是 p 标签的 CSS 始终处于事件状态。所以它在表单提交之前看起来像这样。

有没有办法让p标签或者css只在表单提交成功时显示？

Answer 1

好的，我找到了解决方案。我不得不通过“msg”发送整个元素，而不是通过“msg”变量发送文本。

它是这样的:

transporter.sendMail(info, (error, info) => {
  if (error) {
    return console.log(error)
  }
  console.log('Message sent %s', info.messageId)
  res.render('contact', {msg: `<p class="sent-message">Message Sent</p>`})
})

然后在 HTML 中我们将 p 标记替换为:

{{{msg}}}