简单的问题，为什么我示例中的 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 没有过渡？
您的动画正在查找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>