頁面加載後幾秒鐘顯示塊

我有一個在頁面底部保存按鈕的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

頁面加載後幾秒鐘顯示塊

回答

相關問題