Question

我有一个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替换上面的不透明度：0不起作用。是否有纯CSS解决方案？

Answer 1

将您的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>

正如您所看到的，您必须使用animation-delay animation: fadein而不是docker: Error response from daemon: invalid header field value的持续时间。

Answer 2

如果您需要延迟使用animation-delay，请尝试使用此opacity:1 .11s中的animation: fadein 11s;是动画持续时间。不是延迟

或

尝试使用下面显示的单行

更新：应用初始opacity=0;并应用forwards。如果您不需要隐藏后，请删除to { opacity:0;}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

由于你的问题已经得到解答，我想我会为以后寻找非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>

Answer 4

您可以通过Onload Event处理它。我们无法预测获取表单字段相关内容所需的时间。在onLoad函数结束时，您将显示按钮div

页面加载后几秒钟显示块

4 个答案: