页面加载后几秒钟显示块

我有一个在页面底部保存按钮的div。 div上方是一个包含用户数据字段的表单。页面加载后几秒钟显示块

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

的问题是在页面加载时，有在装载形式和DIV第一保持按钮加载，用户可以看到它在网页中间几秒钟的延迟。表单加载后，带按钮的div将在页面底部呈现恰当的位置。

我试图使用ng-cloak，因为它是一个角度应用程序，并将.ng-cloak类放在我的样式表中。但是没有一个可行。

我试图用

div.buttons-div { 
    text-align: center; 
    animation: fadein 11s; 
} 

@keyframes fadein { 
    from { opacity: 0;} 
    to { display: block;} 
}

但我仍然不认为这是理想的。我想将它隐藏10秒，然后弹出（显示模块），而不是淡化效果。用display：none代替opacity：0不工作。有没有一个纯粹的CSS解决方案？

来源

2016-11-18 pro

使用js'setTimeout（）' –

使用动画延迟来延迟显示，如果你想弹出，你有空间保留吗？使用显示块和没有动画与推它的内容。使用可见性：隐藏将保留空间保留，但你将无法看到它。 –

你的CSS改变这个这样的：

div.buttons-div { 
 
    opacity: 0; 
 
    text-align: center; 
 
    animation: fadein 1s; 
 
    animation-delay:10s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -ms-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes fadein { 
 
    from { opacity: 0; } /*Update because you asked for this numbers BUT i propose from 0 otherwise you are instantly seeing the div. */ 
 
    to { opacity: 1;} 
 
}

<div class="buttons-div">My div</div>

正如你所看到的，你必须使用http://www.w3schools.com/csSref/css3_pr_animation-delay.asp的animation-delay，而不是仅仅是在你的情况animation: fadein持续时间。

来源

2016-11-18 14:37:52

这不起作用。我首先看到div加载。 – pro

@pro检查我更新的答案。 –

它应该像你在代码片段中看到的那样工作。 –

尝试这样opacity:1如果你需要啊延迟使用animation-delay .The animation: fadein 11s;在11S是动画的持续时间。不能延迟

或

尝试下面

显示单行更新：适用初始opacity=0;并应用forwards。如果你隐藏后无需只是删除to { opacity:0;}

div.buttons-div { 
 
      opacity:0; 
 
      text-align: center; 
 
      animation: fadein 3s 10s forwards; 
 
      
 
     } 
 
     
 
     @keyframes fadein { 
 
      from { opacity: 0;} 
 
      50%{opacity: 1;} 
 
      to { opacity:0;} 
 
     }

<div class="buttons-div">My div</div>

来源

2016-11-18 14:38:30 prasanth

这不起作用。我首先看到div加载。 – pro

@pro看我的更新回答。它可以 – prasanth

-1

您可以处理它形成onload事件。我们无法预测获取表单域相关内容的时间。在onLoad函数结束时，您显示按钮div

来源

2016-11-18 14:50:48 tsb

在CSS中没有'OnLoad'或其他事件... –

我们无法在CSS中处理这种情况。我说当表单字段onload事件，你可以处理它来显示或隐藏按钮的div组件 – tsb

我们不能预测时间服用表单字段内容负荷 – tsb

由于您的问题已经得到解答，我想我会为后来寻找非css专用解决方案的用户提供javascript选项。

将onload添加到您的身体标记，以便您的按钮仅在页面完全加载后才显示。

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

来源

2016-11-18 15:00:22

页面加载后几秒钟显示块

回答

相关问题