javascript - 自定义警报淡入但不会淡出

Question

我正在尝试让我的自定义警报淡入和淡出。我通过在 toast-container div 中添加和删除类“show”来改变它的可见性。它会很好地淡出，但它会暂时淡出，然后立即重新出现。使用检查元素表明它遇到了此错误:

job-application-form.php:463 Uncaught TypeError: Cannot read property 'classList' of undefined at job-application-form.php:463

位于函数setTimeout(function(){ cont.classList.remove("show")}, 3000);并且“show”类并未从div中删除。

我不明白为什么会收到此错误或如何修复它。请帮忙。

分区

<div id="toast-container" class="toast-top-right"><div  id="toast-type" class="toast" aria-live="assertive" style=""><div id="snackbar">message</div></div></div>

功能:

<script> 
  function Toast(message, messagetype) 
  {
     var cont = document.getElementById("toast-container").classList.add("show");
     var type = document.getElementById("toast-type");
     type.className += " " + messagetype;
     var x = document.getElementById("snackbar");
         x.innerHTML = message;
     setTimeout(function(){ cont.classList.remove("show")}, 3000);
  }
</script>

php中的函数调用

$Toast = "We have <strong>successfully</strong> received your message and will get back to you as soon as possible.";
        $Error = "toast-error";
        $Success = "toast-success";
        echo "<script type='text/javascript'>Toast('$Toast', '$Success');</script>";

CSS:

#snackbar { 
  word-wrap: break-word;
}

#toast-container {
    visibility: hidden;
    position: fixed;
    z-index: 999999;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#toast-container.show {
    visibility: visible;
}

#toast-container * {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

.toast-top-right {

    top: 12px;

    right: 12px;

}

#toast-container > div {

    position: relative;

    pointer-events: auto;

    overflow: hidden;

    margin: 0 0 6px;

    padding: 20px 25px;

    width: 300px;

    -moz-border-radius: 3px 3px 3px 3px;

    -webkit-border-radius: 3px 3px 3px 3px;

    border-radius: 3px 3px 3px 3px;

    background-repeat: no-repeat;

    -moz-box-shadow: 0 0 12px #999999;

    -webkit-box-shadow: 0 0 12px #999999;

    box-shadow: 0 0 12px #999999;

    color: #FFFFFF;

    opacity: 0.8;

    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

    filter: alpha(opacity=80);

}

.toast {

    background-color: #030303;

}

.toast-success {

    background-color: #51A351;

}

.toast-error {

    background-color: #BD362F;

}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

Answer 1

问题在于您的变量 cont 未正确初始化。

更改此行:

var cont = document.getElementById("toast-container").classList.add("show");

对此:

var cont = document.getElementById("toast-container");
cont.classList.add("show");