javascript - 给一个div加动画为什么实现不了,详情请看代码
问题描述
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代码:<p class=’flightNumber’></p>js代码:$('.flightNumber').addClass('runIn')
问题解答
回答1：<!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;是无效的，所以不可能有动画效果出现。
回答2：谢邀。
.flightNumber{ transition: opacity 2000ms ease-in-out; opacity: 0;}.runIn{ opacity: 1;}
把俩display都去掉，另外前缀没必要写，直接原生就行。真有需要的话，可以先.show()下嘛（反正你opacity是0啥也看不到）。
网公网安备