Question

如果我的服务器出现任何错误/警告，我需要显示并隐藏具有绝对位置的顶部通知栏 - DIV。

我只需要在发生错误时显示此BAR并在几秒钟之后隐藏它，可能是10秒，并且效果平稳？

如何在HTML，CSS / SCSS和Pure Javascript中实现这一点。没有Javscript框架：（

<div id="app-notification-bar" class="app-notification-bar app-error-message"></div>

SCSS，前缀是app -

.#{$prefix}error-message {
        font-family:Helvetica, Arial, sans-serif;
        font-size:12px;
        vertical-align:central;
        color: #cc0000;
        font-weight:bold;
    }

    .#{$prefix}notification-bar {
        position: absolute;
        z-index: 101;
        top: 0;
        left: 0;
        right: 0;
        background: #FFFFFF;
        text-align: center;
        line-height: 2.5;
        overflow: hidden; 
        -webkit-box-shadow: 0 0 5px black;
        -moz-box-shadow:    0 0 5px black;
        box-shadow:         0 0 5px black;
    }

    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-50px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-50px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }

    .cssanimations.csstransforms .#{$prefix}notification-bar {
        -webkit-transform: translateY(-50px);
        -webkit-animation: slideDown 2.5s 10.0s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 2.5s 10.0s 1 ease forwards;
    }

JS

document.getElementById('app-notification-bar').innerHTML = wrnMsg;
setTimeout(function(){ document.getElementById('app-notification-bar').innerHTML = ''; }, 3000);

Answer 1

Js

var d;
function error(message){
var d=document.getElementById("error");
d.innerHTML=message;
d.style.opacity="1";
window.setTimeout(function(){
d.style.opacity="0";
},5000);
}
error("a big bug");

的CSS：

#error{
opacity:0;
transition:all ease 2s;
background-color:red;
color:white;
}

HTML：

<div id="error"></div>

Answer 2

检查This Out

CSS

body {
  background: white;
}

div.error-content {
  transition: all 0.5s linear;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color:red;
  text-align: center;
  color:white;
  top:-70px;
  position:absolute;
}

div.error-content.active {
  top:0px
}

#showError {
  position: absolute;
 top: 80px; 
}

的Javascript

document.getElementById("showError").addEventListener("click", function() {
  var className = document.getElementsByClassName('error-content')[0].className 
  document.getElementsByClassName('error-content')[0].className = className.concat(" active");
  setTimeout(function() {
    document.getElementsByClassName('error-content')[0].className = 'error-content'
  },2000)
});

Answer 3

您应该将代码编写为此问题。这有助于您使用fadeIn随着时间的推移而变慢。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

只需用这些彩色框替换你的装载div

顶部通知栏显示和隐藏，效果流畅

3 个答案: