您可以使用显示功能使它按预期的自然方式工作-但您必须使用Javascript或其他人提出的在另一个标签中包含一个标签的巧妙技巧，以限制浏览器使其正常工作。我不在乎内部标签，因为它会使CSS和尺寸进一步复杂化，因此这是Javascript解决方案：
https://jsfiddle.net/b9chris/hweyecu4/17/
从类似以下的框开始：
<div id="box" class="hidden">Lorem</div>
一个隐藏的盒子。
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
我们将使用相关q / a中的技巧，检查offsetHeight即时限制浏览器：
https://stackoverflow.com/a/16575811/176877
首先，将上述技巧正式化的库：
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
接下来，我们将使用它来显示一个框，并将其淡入：
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
淡入淡出框。因此，请.noTrnsn()关闭转换，然后删除hidden该类，该类display将从none其默认值翻转block。然后，我们将不透明度设置为0，以准备淡入。现在，我们已经设置了舞台，使用再次打开过渡.resumeTrnsn()。最后，通过将不透明度设置为1开始过渡。
没有该库，无论是显示更改还是不透明度更改都会给我们带来不良的结果。如果我们仅删除库调用，则根本没有任何过渡。
请注意，在淡出动画结束时，以上内容不会再次将显示设置为无。虽然我们可以做得更好。让我们用一个从0开始逐渐变高的高度来做到这一点。
看中！
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
我们现在正在转换高度和不透明度。请注意，我们未设置高度，这意味着它是默认值auto。按照惯例，这不能过渡-从自动移到像素值（如0）将无法过渡。我们将使用库以及另一种库方法来解决此问题：
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
这是一种方便的方法，它使我们可以参与jQuery现有的fx /动画队列，而无需使用jQuery 3.x现在不包含的任何动画框架。我不会解释jQuery的工作原理，但足以说明，jQuery提供的.queue()和.stop()帮助我们可以防止动画相互踩踏。
让我们为滑倒效果制作动画。
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
该代码首先通过检查#box其类来检查其是否处于隐藏状态。但是它通过使用wait()库调用来完成更多工作，方法hidden是在滑出/淡入淡出动画的末尾添加类，您希望该类实际上是否被隐藏了，而上面的简单示例无法做到这一点。碰巧还可以一遍又一遍地显示/隐藏元素，这在前面的示例中是一个错误，因为从未恢复过隐藏的类。
您还可以看到调用CSS和类更改之后.noTrnsn()，通常可以为动画设置阶段，包括进行测量，例如#box在调用之前测量最终高度，而不向用户显示最终高度，然后.resumeTrnsn()从完整设置中对其进行动画处理达到其目标CSS值。
旧答案
https://jsfiddle.net/b9chris/hweyecu4/1/
您可以使用以下命令在点击时进行过渡：
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
CSS是您的猜测：
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
关键是限制显示属性。通过删除隐藏的类，然后等待50 ms，然后通过添加的类开始过渡，我们使它出现，然后按需要扩展，而不是只是在没有任何动画的情况下跳到屏幕上。换一种方式发生类似的情况，除了我们等到动画结束之前再应用隐藏。
注意：我在.animate(maxWidth)这里是为了避免setTimeout比赛条件。setTimeout当您或其他人不知道它的代码而很快引入隐藏的错误时。.animate()容易被杀死.stop()。我只是用它在标准fx队列上放置50毫秒或2000毫秒的延迟，在此之上，其他基于此的编码人员可以轻松找到/解决这些延迟。