顶部通知栏显示和隐藏效果平滑答案

【问题标题】：Top Notification Bar Show and Hide with smooth effect顶部通知栏显示和隐藏效果平滑
【发布时间】：2016-07-14 19:31:30
【问题描述】：

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

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

如何在 HTML、CSS/SCSS 和纯 Javascript 中实现这一点。没有 JavaScript 框架 :(

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

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

【问题讨论】：

我的错。我已经写好了代码。让我分享一下。
nvm 你添加了你的代码......我的错，已经有一些答案，所以我不需要提供我的输入:) 祝你好运
你应该参考这个答案已经适合你的问题stackoverflow.com/questions/6121203/…

标签： javascript html css sass

【解决方案1】：

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>

【讨论】：

【解决方案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)
});

【讨论】：

【解决方案3】：

你应该把你的代码写成这个问题。这对您使用淡入淡出会有所帮助。

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

【讨论】：

我不打算使用任何框架，包括 JQuery