问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

给一个div加动画为什么实现不了,详情请看代码

头像
Letme
    17724184

    css:
    .flightNumber{

      display: none;
-moz-transition: opacity 2000ms ease-in-out;
-o-transition: opacity 2000ms ease-in-out;
-webkit-transition: opacity 2000ms ease-in-out;
/*transition: opacity 2000ms ease-in-out;
opacity: 0;
}
.runIn{
-moz-transition: opacity 2000ms ease-in-out;
-o-transition: opacity 2000ms ease-in-out;
-webkit-transition: opacity 2000ms ease-in-out;
/*transition: opacity 2000ms ease-in-out;*/
opacity: 1;
display: block;
}

    html代码:<div class='flightNumber'></div>
    js代码:$(".flightNumber").addClass("runIn")

    html5javascriptcsshtml
    阅读 2.5k
    2 个回答
    得票最新
    头像
    differ_wy
      1464
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .flightNumber{
      /*display: none;*/
      transition: opacity 2000ms ease-in-out;
      opacity: 0;
    }
    .runIn{
      /*display: block;*/
      transition: opacity 2000ms ease-in-out;
      opacity: 1;
    }
    </style>
  </head>
  <body>
    <div class='flightNumber' style="width: 100px; height: 100px; background-color: red;"></div>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
      $(".flightNumber").addClass("runIn");
    </script>
  </body>
</html>

      display:none 这东西加上，动画不可能有效，因为display:none意味着 页面上不解析这个元素，这个元素的所有样式是无效的，这个前提下transition: opacity 2000ms ease-in-out;是无效的，所以不可能有动画效果出现。

      头像
      某熊猫桑
        16.1k61547

        谢邀。

        .flightNumber{
    transition: opacity 2000ms ease-in-out;
    opacity: 0;
}
.runIn{
    opacity: 1;
}

        把俩display都去掉，另外前缀没必要写，直接原生就行。
        真有需要的话，可以先.show()下嘛（反正你opacity是0啥也看不到）。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题