出于某种原因，我没有获得 CSS 过渡效果，我制作了一个 fiddle这解决了问题，覆盖层从顶部延迟滑动。
但是在我的 webpage 上它不工作，覆盖是立即的。为什么？该代码与其他页面上的代码相同。
<!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>
最佳答案
我真的不知道你为什么会遇到这个问题(代码看起来是正确的)，试试这个 hack 也许会解决问题:
JS :
代替:
$('#message1').toggleClass('in');
将 setTimeout() 添加到代码中以在页面准备好 1 秒后触发切换，如果不起作用，请尝试 3000(3 秒):
setTimeout(function(){
$('#message1').toggleClass('in');
}, 1000);
希望能解决您的问题。
关于javascript - 为什么我得不到 CSS 过渡效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31486261/