当某些事件发生时，我会从我的观点底部出现“快餐栏”通知。
它大部分时间都有效，但有时它不会显示。
我基本上定义了一个隐藏的div，然后在调用javascript函数时使用某些动画使其可见。我传入文字和背景颜色。我正在使用W3Schools的代码并对其进行了一些修改。
我很难搞清楚为什么有时候不会出现这种情况。
我已在Chrome网络工具中运行它，并设置了一个断点，以及一个控制台日志。我得到了控制台lo和断点，它将类设置为“show”，但我仍然没有在屏幕上看到通知。
我的z-Index设置为比我的代码中的任何其他视图高10,9，所以没有理由它会落后于任何东西。
我只是在寻找有关其他事情的建议。代码如下：
这是在Meteor中，因此有一个模板用于通知。
<template name="snackbar">
<div id="snackbar" class="snackbar shadow"></div>
</template>
接下来是CSS
/* Small notification bar displayed briefly on screen */
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #93b7d6;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 16px;
position: fixed;
z-index: 10;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.shadow {
min-width: 250px;
padding: 15px;
box-shadow: -5px 7px 8px #2f2f2f;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
@-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;}
}
当javascript函数被调用时：
// This is called to display the snackbar notification
showSnackbar = function() {
console.log("Snackbar got Called!");
var snackbarText = Session.get("snackbarText");
var snackbarColor = Session.get("snackbarColor");
var snackbarNotification = document.getElementById("snackbar")
snackbarNotification.innerHTML = snackbarText;
snackbarNotification.style.backgroundColor = snackbarColor;
snackbarNotification.className = "show";
setTimeout(function() {
snackbarNotification.className = snackbarNotification.className.replace("show", "");
}, 7000);
}
首先我从这个模板中调用它，它显示：
<template name="entityManagement">
<div id="manageEntities">
<h3>Entity Management</h3>
<div class="row">
<div class="column column-40">
{{> entityName}}
</div>
<div class="column column-40">
{{> entityType}}
</div>
<div class="column">
{{> addEntity}}
</div>
</div>
<div class="row">
<div class="column">
<table>
<tr>
<th>
Entity Name
</th>
<th>
Entity Type
</th>
<th>
Entity Networks
</th>
<th>
Product(s)
</th>
<th>
Actions
</th>
</tr>
{{#each getCurrEntities}}
{{> entityTableInfo}}
{{/each}}
</table>
</div>
</div>
</div>
<!-- The following template is hidden, and called when needed as a
notificatioin to the user of some event outcome. -->
{{> snackbar}}
{{> entityNetworkForm}}
</template>
以下是此模板中的javascript将成功调用它：
Meteor.call('Entities.insert', entityName, entityType, function(err, result) {
if (err) {
Session.set("snackbarText", "Error Inserting New Entity!");
Session.set("snackbarColor", "red");
showSnackbar();
} else {
Session.set("entity_id", result);
Session.set("snackbarText", "New Entity Successfully Added!");
Session.set("snackbarColor", "green");
showSnackbar();
$("#entityName").val('');
$("#entityType").val('');
var entityNetworkModal = document.getElementById("entityNetworkForm");
entityNetworkModal.style.display = "block";
}
});
如果我从这个模板中调用它，虽然......没有出现：
<template name="productManagement">
<div id="manageProducts">
<h3>Product Management</h3>
<div class="row">
<div class="column">
{{> productName}}
</div>
<div class="column">
{{> productVersion}}
</div>
<div class="column column-20">
<div id="addProductButton">
<br />
<button id="addProduct" class="button primary save"><i class="fa fa-plus-sign fa-fw myNav addProduct" aria-hidden="true"></i> Add Product</button>
</div>
</div>
</div>
<div class="row">
<div class="column">
<table>
<tr>
<th>
Name
</th>
<th>
Version
</th>
<th>
Added On
</th>
<th>
Added By
</th>
<th>
Actions
</th>
</tr>
{{#each productNames}}
{{> productListTable}}
{{/each}}
</table>
</div>
</div>
</div>
<!-- The following template is hidden, and called when needed as a
notificatioin to the user of some event outcome. -->
{{> snackbar}}
</template>
这是javascript调用它：
'click #addProduct' (event) {
event.preventDefault();
var productName = $("#productName").val();
var productVersion = $("#productVersion").val();
var fullProductName = productName + "_" + productVersion;
var countOfProductAndVersion = Products.find({ fullProductName: fullProductName }).count();
if (countOfProductAndVersion > 0) {
console.log("exists - you should see a snackbar....")
// give an alert that the product name already exists
Session.set("snackbarText", "Product Name Already Exists!");
Session.set("snackbarColor", "red");
showSnackbar();
}
},
与往常一样，非常感谢任何帮助。