приоритет javascript внутри функции

Я пытаюсь открыть оверлей первым, чем окно предупреждения, которое будет открыто после него. Оповещение окно приходит первым, даже если я написал его после наложения one.So я должен знать, что проблема здесь в моем кодеприоритет javascript внутри функции

<!DOCTYPE html> 
<html> 
    <style> 
     body { 
      margin: 0; 
      font-family: 'Lato', sans-serif; 
     }    
     .overlay { 
      height: 100%; 
      width: 0; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      left: 0; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0, 0.9); 
      overflow-x: hidden; 
      transition: 0.5s; 
     }    
     .overlay-content { 
      position: relative; 
      top: 25%; 
      width: 100%; 
      text-align: center; 
      margin-top: 30px; 
     }    
     .overlay a { 
      padding: 8px; 
      text-decoration: none; 
      font-size: 36px; 
      color: #818181; 
      display: block; 
      transition: 0.3s; 
     }    
     .overlay a:hover, .overlay a:focus { 
      color: #f1f1f1; 
     }    
     .overlay .closebtn { 
      position: absolute; 
      top: 20px; 
      right: 45px; 
      font-size: 60px; 
     }    
     @media screen and (max-height: 450px) { 
      .overlay a {font-size: 20px} 
      .overlay .closebtn { 
      font-size: 40px; 
      top: 15px; 
      right: 35px; 
      } 
     } 
     </style> 
     <body> 

     <div id="myNav" class="overlay"> 
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
      <div class="overlay-content">    
      </div> 
     </div> 

     <h2>Fullscreen Overlay Nav Example</h2> 
     <p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
     <p>In this example, the navigation menu will slide in, from left to right:</p> 
     <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

     <script> 
     function openNav() {  
      document.getElementById("myNav").style.width = "100%"; 
      alert("hello"); 
     } 

     function closeNav() { 
      document.getElementById("myNav").style.width = "0%"; 
     }    
     </script>     
     </body> 
     </html>

источник

2016-10-02 vish_youtube

Ваш Javascript код не будет ждать на вашем

document.getElementById("myNav").style.width = "100%";

линия в то время как переход css происходит. Он сразу же приступит к выполнению любых строк javascript.

Если вы хотите, чтобы действие произошло после перехода, вам необходимо добавить прослушиватель событий для transitionend (или animationend при использовании анимации ключевого кадра).

Так что, если вы хотите, чтобы ваше уведомление произойдет после перехода вы должны изменить свой код, чтобы что-то вроде

var nav = document.getElementById("myNav"); 
nav.addEventListener("transitionend",function(){ 
    //this callback is called when transition ends 
    alert("hello"); 
}); 
nav.style.width = "100%";

Demo

var nav = document.getElementById("myNav"); 
 
var btn = document.querySelector("button"); 
 

 
function openNav() { 
 

 
    nav.addEventListener("transitionend", function() { 
 
    //this callback is called when transition ends 
 
    alert("hello"); 
 
    }); 
 
    nav.style.width = "100%"; 
 
} 
 

 
btn.addEventListener("click", openNav);

#myNav { 
 
    display: block; 
 
    width: 0%; 
 
    height: 100px; 
 
    background: grey; 
 
    transition: width 1s; 
 
}

<div id="myNav"> 
 
</div> 
 

 
<button>Open</button>

источник

2016-10-02 04:58:10

приоритет javascript внутри функции

ответ

Смежные вопросы