javascript - 給一個div加動畫為什么實現(xiàn)不了,詳情請看代碼
問題描述
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;是無效的，所以不可能有動畫效果出現(xiàn)。
回答2：謝邀。
.flightNumber{ transition: opacity 2000ms ease-in-out; opacity: 0;}.runIn{ opacity: 1;}
把倆display都去掉，另外前綴沒必要寫，直接原生就行。真有需要的話，可以先.show()下嘛（反正你opacity是0啥也看不到）。
網(wǎng)公網(wǎng)安備