使通知栏从底部向上滑动

Question

我有一个小的水平通知条，从页面底部向上滑动。

它显示得很好，但当你打开页面时，它会快速闪烁，然后消失，然后向上滑动。

我如何修改它，使它在转换发生之前不会出现/消失?

#notificationBarBottom {
  position: fixed;
  z-index: 101;
  bottom: 0;
  left: 0;
  right: 0;
  background: #5cb85c;
  color: #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(0px);
  }
  10%,
  90% {
    -webkit-transform: translateY(510px);
  }
}
@-moz-keyframes slideDown {
  0%, 100% {
    -moz-transform: translateY(0px);
  }
  10%,
  90% {
    -moz-transform: translateY(510px);
  }
}
.cssanimations.csstransforms #notificationBarBottom {
  -webkit-transform: translateY(510px);
  -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
  -moz-transform: translateY(510px);
  -moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}

<div id="notificationBarBottom">Hello, human!</div>

Jsfiddle demo在这里:https://jsfiddle.net/cnfk36jd/(但不幸的是，问题不可见)。在这里你可以看到"闪烁"的页面http://www.whycall.me/bannerTest.html

我在这里尝试了建议:https://css-tricks.com/pop-from-top-notification/并调整了translateY值相当多，但它没有帮助，不知道还能做什么。

谢谢你的帮助

Answer 1

元素的初始位置是可见的，然后，在页面加载期间，第一次翻译开始隐藏它，因此它闪烁。

这样做，使用transform: translateY(calc(100% + 10px));将其推出视图，然后使用transform: translateY(0));将其向上滑动。

我用100%代替-510px使其与高度无关，并添加10px来弥补顶部阴影

我还临时删除了前缀属性，所以您需要将它们添加回去

更新2021: 更新答案，改进了代码建议，并且，基于评论，添加了如何使其隐藏使用点击

document.getElementById('notificationBarBottom').addEventListener('click', function() {
   this.classList.add('hideMe');
})

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: 0;
    transform: translateY(calc(100% + 10px));
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow: 0 0 5px black;
}
@keyframes slideUp {
    0% { transform: translateY(100% + 10px); }
    100% { transform: translateY(0); }
}
#notificationBarBottom {
    animation: slideUp 2.5s ease forwards;
}
#close {
  display: none;
}
/* added to show how to hide with a click */
@keyframes slideDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(100% + 10px); }
}
#notificationBarBottom.hideMe {
    animation: slideDown 2.5s ease forwards;
}

<div id="notificationBarBottom">Hello, human!</div>

Answer 2

我认为发生这种情况是因为您编写这段代码的css文件调用得太晚了。

在你的html页面中，试着在其他css或JS文件之前调用这个css文件