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
Post a Comment