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演示：https://jsfiddle.net/cnfk36jd/（但遗憾的是问题在那里看不到）。这是您可以看到“闪烁”http://www.whycall.me/bannerTest.html

的页面

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

感谢您的帮助

Answer 1

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

这样做，将它放在底部bottom: -510px;下方，然后向上滑动。

更新了小提琴：https://jsfiddle.net/cnfk36jd/1/

＆＃13;

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: -510px;
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow:         0 0 5px black;
}
@keyframes slideDown {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-510px); }
}
#notificationBarBottom {
    animation: slideDown 2.5s ease forwards;
}
#close {
  display: none;
}

＆＃13;

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

＆＃13;

旁注：我临时删除了前缀属性，因此您需要将它们添加回来

Answer 2

我认为这种情况正在发生，因为您编写此代码的css文件有点太迟了。

在你的html页面中，尝试比其他css或JS文件更早地调用这个css文件

使通知栏从底部向上滑动

2 个答案: