Question

由于某种原因，我没有获得CSS过渡效果，而且我已经解决了问题，并且叠加层从顶部延迟滑动。

但是在我的fiddle上，它无法正常工作且叠加是立竿见影的。为什么？代码与其他页面上的代码相同。

<!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>

Answer 1

我真的不知道为什么你有这个问题（代码看起来正确），试试这个hack也许会解决问题：

JS：

而不是：

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

在代码中添加setTimeout()以在页面准备好1秒后触发切换，如果不起作用请尝试3000（3s）：

 setTimeout(function(){
      $('#message1').toggleClass('in');
 }, 1000);

希望能解决你的问题。

为什么我没有获得CSS过渡效果？

1 个答案: