Question

一个简单的问题，为什么我的示例中的CSS过渡不起作用：

$(function()
  {
      setTimeout(function()
                 {
                     $('#dr').addClass('testen');
                 }, 1000);
  });

.dropdown {
  float: right;
  overflow: hidden;
  margin: 15px 0 0 15px;
  border: 0px solid gray;
  background: gray;
  width: 150px;
  height: 150px;
  -webkit-transition: height 1.5s;
  -moz-transition: height 1.5s;
  -ms-transition: height 1.5s;
  -o-transition: height 1.5s;
  transition: height 1.5s;
}

.testen {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <title>hi</title>
  </head>

  <body>

    <div id="dr" class="dropdown">
      hi
    </div>
    <div style="height:1500px">
      height
    </div>

  </body>

</html>

javascript将css类“ .testen”添加到div元素中，该元素正在使用margin-top移动该元素，并且该元素具有css过渡值，所以为什么它不起作用，它立即将div移动到了没有过渡的例子？

Answer 1

您的动画正在寻找height，但您正在调整边距。

.testen {
  margin-top: 50px;
}

我已经在下面更新了您的代码

$(function()
  {
      setTimeout(function()
                 {
                     $('#dr').addClass('testen');
                 }, 1000);
  });

.dropdown {
  float: right;
  overflow: hidden;
  margin: 15px 0 0 15px;
  border: 0px solid gray;
  background: gray;
  width: 150px;
  height: 150px;
  -webkit-transition: margin-top 1.5s;
  -moz-transition: margin-top 1.5s;
  -ms-transition: margin-top 1.5s;
  -o-transition: margin-top 1.5s;
  transition: margin-top 1.5s;
}

.testen {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <title>hi</title>
  </head>

  <body>

    <div id="dr" class="dropdown">
      hi
    </div>
    <div style="height:1500px">
      height
    </div>

  </body>

</html>

div元素上的CSS过渡

1 个答案: