search

Home  >  Q&A  >  body text

javascript - Why can't I add animation to a div? Please see the code for details.

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 code:<p class='flightNumber'></p>
js code:$(".flightNumber").addClass("runIn")

滿天的星座滿天的星座2843 days ago523

reply all(2)I'll reply

  • PHP中文网

    PHP中文网2017-05-16 13:40:34

    <!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 If this is added, the animation cannot be effective, because display:none means that this element is not parsed on the page, and all styles of this element are invalid. Under this premise, transition: opacity 2000ms ease-in-out; is Invalid, so no animation effect is possible.

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-16 13:40:34

    Thanks for the invitation. 

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

    The number display都去掉，另外前缀没必要写，直接原生就行。
    真有需要的话，可以先.show()下嘛（反正你opacity is 0 and nothing can be seen).

    reply
    0
  • Cancelreply