简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 給一個div加動畫為什麼實作不了,詳情請看程式碼
滿天的星座
滿天的星座 2017-05-16 13:38:34
0
2
465

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")

滿天的星座
滿天的星座

全部回覆(2)
Ty80
Ty802017-05-16 13:40:34 2樓 
<!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;是無效的，所以不可能有動畫效果出現。

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-05-16 13:40:34 1樓

謝邀。 

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

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！