javascript - Why don't I get the CSS transition effect? -


i'm not getting css transition effect reason , i've made fiddle solved problem , overlay comes delayed sliding top.

but on webpage not working , overlay immediate. why? code same works on other pages.

<!doctype html> <html dir="ltr" lang="en-in" class="js"> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8">     <meta charset="utf-8">      <title>         </title>     <!-- css includes: -->     <!-- le styles -->       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">      <link href="/static/css/common_in.css?{{version}}" rel="stylesheet" type="text/css">       <!-- javascripts: -->     <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>      <script type="text/javascript">         $('[class^="item_arrow_"]').css('height', 'auto');         //alert('test');         $(function() {             {% if message %}         $('#message1').toggleclass('in');             {%  endif %}  });     </script> </head> <body name="body">  <div id="message1" class="alert alert-warning alert-dismissable flyover flyover-centered">   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>   <strong></strong> {{ message }} </div> 

i dont know why have problem (the code looks right), try hack maybe solve issue :

js :

instead of :

 $('#message1').toggleclass('in'); 

add settimeout() code fire toggle after 1 second of page ready , if not work try 3000 (3s) :

 settimeout(function(){       $('#message1').toggleclass('in');  }, 1000); 

hope solve problem.


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -