顶部通知栏显示和隐藏具有平滑效果

Top Notification Bar Show and Hide with smooth effect

本文关键字：平滑 隐藏 通知 显示 顶部      更新时间：2023-09-26

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

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

如何在 HTML、CSS/SCSS 和 Pure Javascript 中实现这一点。NO Javscript Frameworks :(

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

SCSS，前缀是应用程序-

.#{$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);

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;
}

目录：

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

看看这个

.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; 
}

爪哇语

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)
});

你应该把你的代码写成这个问题。这对您使用淡入时间和缓慢使用很有帮助。

<!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 即可

相关文章：