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")
display:none 這東西加上,動畫不可能有效,因為display:none意味著頁面上不解析這個元素,這個元素的所有樣式是無效的,這個前提下transition: opacity 2000ms ease-in-out;是無效的,所以不可能有動畫效果出現。
謝邀。
把倆
display
都去掉,另外前缀没必要写,直接原生就行。真有需要的话,可以先
.show()
下嘛(反正你opacity
是0啥也看不到)。