Javascript 页面加载几秒钟后显示块_Javascript_Html_Css_Angularjs

Javascript 页面加载几秒钟后显示块

javascript html css angularjs

Javascript 页面加载几秒钟后显示块,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我有一个特定的div，它在页面底部保存按钮。div上方是一个表单，其中包含用于用户数据的字段 <div> <form> <input > <input > <input > </form> <div> <div class="buttons-div"> <button>ADD</button> <button>Cancel<

我有一个特定的div，它在页面底部保存按钮。div上方是一个表单，其中包含用于用户数据的字段

<div>
  <form>
   <input >
   <input >
   <input >
  </form>
<div>
<div class="buttons-div">
   <button>ADD</button>
   <button>Cancel</button>
<div>

但我仍然认为这并不理想。我想让它隐藏10秒钟，然后弹出（显示块），而不是褪色效果。将上面的不透明度0替换为显示：无不起作用。有没有一个纯粹的CSS解决方案？

将您的CSS更改为此为此：

div.buttons-div{
不透明度：0；
文本对齐：居中；
动画：Fadein1s；
动画延迟：10秒；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-ms动画填充模式：正向；
动画填充模式：正向；
} 
@关键帧fadein{
从{opacity:0；}/*更新，因为您要求这个数字，但我建议从0更新，否则您将立即看到div*/
到{opacity:1；}
}

My div

将您的css更改为此为此：

div.buttons-div{
不透明度：0；
文本对齐：居中；
动画：Fadein1s；
动画延迟：10秒；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-ms动画填充模式：正向；
动画填充模式：正向；
} 
@关键帧fadein{
从{opacity:0；}/*更新，因为您要求这个数字，但我建议从0更新，否则您将立即看到div*/
到{opacity:1；}
}

My div

如果需要，可以这样尝试

opacity:1

动画：fadein11s在11s中是动画持续时间。不是延迟
或
尝试使用下面显示的单行代码
更新：应用初始不透明度=0
；如果隐藏后不需要，只需将删除到{opacity:0；}


div.buttons-div{
不透明度：0；
文本对齐：居中；
动画：fadein 3s 10s向前；
}
@关键帧淡入淡出{
从{opacity:0；}
50%{不透明度：1；}
到{不透明度：0；}
}
My div
如果需要，可以这样尝试opacity:1
.动画：fadein11s在11s中是动画持续时间。不是延迟
或
尝试使用下面显示的单行代码
更新：应用初始不透明度=0
；如果隐藏后不需要，只需将删除到{opacity:0；}


div.buttons-div{
不透明度：0；
文本对齐：居中；
动画：fadein 3s 10s向前；
}
@关键帧淡入淡出{
从{opacity:0；}
50%{不透明度：1；}
到{不透明度：0；}
}
My div您可以从Onload事件处理它。
我们无法预测获取表单字段相关内容所需的时间。
在onLoad函数的末尾显示按钮div，您可以从onLoad事件处理它。
我们无法预测获取表单字段相关内容所需的时间。
在onLoad函数的末尾，您显示按钮div
，因为您的问题已经得到了回答，我想我会为稍后来寻找非css解决方案的人提供一个javascript选项
将onload
添加到您的body标签，以便您的按钮仅在页面完全加载后显示
<head>
     <script>
         function showButtons(){
              document.getElementById("buttons-div").style.display="block";
         }
     </script>
</head>
<body onload="showButtons();">
    <div>
       <form>
         <input >
         <input >
         <input >
       </form>
    <div>
    <div style="display:none;" id="buttons-div">
         <button>ADD</button>
         <button>Cancel</button>
    <div>
</body>


函数showButtons（）{
document.getElementById（“buttons div”）.style.display=“block”；
}
添加
取消
既然您的问题已经得到了回答，我想我会为以后来寻找非css解决方案的人提供一个javascript选项
将onload
添加到您的body标签，以便您的按钮仅在页面完全加载后显示
<head>
     <script>
         function showButtons(){
              document.getElementById("buttons-div").style.display="block";
         }
     </script>
</head>
<body onload="showButtons();">
    <div>
       <form>
         <input >
         <input >
         <input >
       </form>
    <div>
    <div style="display:none;" id="buttons-div">
         <button>ADD</button>
         <button>Cancel</button>
    <div>
</body>


函数showButtons（）{
document.getElementById（“buttons div”）.style.display=“block”；
}
添加
取消
使用jssetTimeout（）
使用动画延迟延迟显示，如果要弹出，是否保留了空间？对动画使用“显示块”和“无”，并将内容推到旁边。使用visibility:hidden将保留空间，但您将无法看到它。使用jssetTimeout（）
使用动画延迟延迟显示，如果要弹出，是否保留了空间？对动画使用“显示块”和“无”，并将内容推到旁边。使用“可见性：隐藏”将保留空间，但您将无法看到它。它实际上会在几秒钟后显示并消失。我用填充模式更新了我的答案。检查代码段（运行它）。谢谢，但我必须将上面的更改为以下div.action-bar-bottom{opacity:0；text align:center；animation:fadein 10s；animation delay:1s；-webkit animation fill mode:forwards；}@keyframes fadein{从{opacity:0.9；}更改为{opacity:1；}现在可以工作了，很高兴我提供了帮助。可能您没有共享完整的代码，因为代码段正在按您所看到的方式工作。不管怎样，很高兴我帮了忙。也许是接受将您的答案更新为以下内容，我将接受。谢谢div.action-bar-bottom{opacity:0；text align:center；动画：fadein 10s；动画延迟：1s；-webkit动画填充模式：forwards；-moz动画填充模式：forwards；-ms动画填充模式：forwards；动画填充模式：forwards；}@keyframes fadein{从{opacity:0.9；}到{opacity:1；}它实际上会在几秒钟后出现并消失。我用f更新了我的答案