css:.flightNumber{
html代码:<p class='flightNumber'></p>js代码:$(".flightNumber").addClass("runIn")
<!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> <p class='flightNumber' style="width: 100px; height: 100px; background-color: red;"></p> <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;是无效的，所以不可能有动画效果出现。
谢邀。
.flightNumber{ transition: opacity 2000ms ease-in-out; opacity: 0; } .runIn{ opacity: 1; }
把俩display都去掉，另外前缀没必要写，直接原生就行。真有需要的话，可以先.show()下嘛（反正你opacity是0啥也看不到）。
display
.show()
opacity
display:none 这东西加上，动画不可能有效，因为display:none意味着 页面上不解析这个元素，这个元素的所有样式是无效的，这个前提下transition: opacity 2000ms ease-in-out;是无效的，所以不可能有动画效果出现。
谢邀。
把俩
display都去掉，另外前缀没必要写，直接原生就行。真有需要的话，可以先
.show()下嘛（反正你opacity是0啥也看不到）。