我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
您可以使用转换事件来实现这一点，因此您为转换构建了两个CSS类，一个保存动画，另一个保存display none状态。你在动画结束后切换它们？在我的例子中，如果我按下一个按钮，我可以再次显示div，并删除这两个类。
尝试下面的代码段。。。
$（文档）.ready（函数）{//分配转换事件$（“table”）.on（“animationend webkitAnimationEnd”，“.visibility_switch_off”，函数（事件）{//我们检查这是否是我们想要的动画如果（event.originalEvent.animationName==“col_hide_anim”）{//在动画之后，我们分配了这个基本上隐藏元素的新类。$（this）.addClass（“动画助手显示无”）；}});$（“按钮”）.click（函数（事件）{$（“table tr.hide col”）.tggleClass（函数）{//我们以切换方式切换动画类。。。//我们知道在动画结束后//动画助手将不显示额外内容//类，当我们需要删除时//根据切换再次显示元素//状态，所以我们在它们之间建立了关系。if（$（this）.is（“.animation helper display none”））{//我正在切换，然后已经有了上面的课程//我们希望它显示元素，因此我们删除//两个类。。。返回“visibility_switch_off动画助手显示无”；}其他{//这里我们只想隐藏元素，所以我们//添加动画类，另一个将被添加//稍后是animationend事件。。。返回“visibility_switch_off”；}});});});表th{背景色：灰色；}表td{背景色：白色；填充：5px；}.animation助手显示无{显示：无；}表tr.visibility_switch_off{动画填充模式：向前；动画名称：col_hide_anim；动画持续时间：1s；}@-webkit关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-moz关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-o-keyframe col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><theader><tr><th>名称</th>年龄</th><th>国家</th></tr></theader><tbody><tr><td>姓名</td>年龄</td><td>国家/地区</td></tr></tbody></table>＜button＞切换-使用渐变动画隐藏“年龄”列，并在＜/button＞之后不显示
其他回答
我找到了更好的方法来解决这个问题，你可以使用CSS动画，并为显示项目创造出很棒的效果。
.item {
display: none;
}
.item:hover {
display: block;
animation: fade_in_show 0.5s
}
@keyframes fade_in_show {
0% {
opacity: 0;
transform: scale(0)
}
100% {
opacity: 1;
transform: scale(1)
}
}
不需要JavaScript，也不需要惊人的最大高度。相反，在文本元素上设置最大高度，并使用字体相对单位，例如rem或em。这样，您可以设置比容器更大的最大高度，同时避免菜单关闭时出现延迟或“弹出”：
HTML
<nav>
<input type="checkbox" />
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</nav>
CSS
nav input + ul li { // Notice I set max-height on li, not ul
max-height: 0;
}
nav input:checked + ul li {
max-height: 3rem; // A little bigger to allow for text-wrapping - but not outrageous
}
请参阅此处的示例：http://codepen.io/mindfullsilence/pen/DtzjE
你可以让它以你所期望的自然方式工作-使用显示-但你必须限制浏览器才能让它工作，要么使用Javascript，要么像其他人建议的那样，使用一个标签放在另一个标签内的花式技巧。我不关心内部标记，因为它会使CSS和维度更加复杂，所以这里是Javascript解决方案：
https://jsfiddle.net/b9chris/hweyecu4/17/
以如下框开头：
<div id="box" class="hidden">Lorem</div>
一个隐藏的盒子。
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
我们将使用相关问答中的技巧，检查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（）关闭了转换，然后我们删除了隐藏类，该类将显示从“无”转换为默认的“块”。然后，我们将不透明度设置为0，为淡入做好准备。现在，我们已经设置了阶段，我们使用.resumeTrnsn（）重新打开过渡。最后，通过将不透明度设为1开始过渡。
如果没有该库，对显示的更改和对不透明度的更改都会导致不理想的结果。如果我们简单地删除了库调用，我们根本不会得到转换。
请注意，上述操作不会在渐变动画结束时再次将显示设置为无。不过我们可以变得更漂亮。让我们用一个从0开始逐渐变高的渐变。
想要
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
我们现在正在转换高度和不透明度。注意，我们没有设置高度，这意味着它是默认值，自动。传统上，这是无法转换的——从自动转换为像素值（如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/animation队列，而不需要jQuery3.x中现在排除的任何动画框架。
让我们设置向下滑动效果的动画。
$('#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（）库调用实现了更多的功能，在滑动/淡出动画的末尾添加隐藏类，如果它实际上是隐藏的，您可以找到隐藏类-这是上面的简单示例无法做到的。这也会启用反复显示/隐藏元素，这在前面的示例中是一个错误，因为隐藏类从未恢复。
您还可以看到在.noTrnsn（）之后调用CSS和类更改，以通常设置动画的阶段，包括进行测量，例如在调用.resumeTrnsn（）之前测量#box的最终高度，而不向用户显示，并将其从完全设置的阶段动画化为其目标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毫秒，然后通过添加的类开始转换，我们可以让它出现，然后像我们想要的那样展开，而不是只在屏幕上闪烁而没有任何动画。类似的情况会以相反的方式发生，只是我们要等到动画结束后再应用隐藏。
注意：我在这里滥用.animate（maxWidth）来避免setTimeout竞争条件。setTimeout很快就会在你或其他人不知道的情况下拾取代码时引入隐藏的错误。animate（）可以很容易地用.stop（）杀死。我只是用它在标准fx队列上设置50毫秒或2000毫秒的延迟，在这里，其他基于此构建的程序员很容易发现/解决。
我已经多次遇到这个问题，现在只是简单地说：
.block {
opacity: 1;
transition: opacity 250ms ease;
}
.block--invisible {
pointer-events: none;
opacity: 0;
}
通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。
您可以使用转换事件来实现这一点，因此您为转换构建了两个CSS类，一个保存动画，另一个保存display none状态。你在动画结束后切换它们？在我的例子中，如果我按下一个按钮，我可以再次显示div，并删除这两个类。
尝试下面的代码段。。。
$（文档）.ready（函数）{//分配转换事件$（“table”）.on（“animationend webkitAnimationEnd”，“.visibility_switch_off”，函数（事件）{//我们检查这是否是我们想要的动画如果（event.originalEvent.animationName==“col_hide_anim”）{//在动画之后，我们分配了这个基本上隐藏元素的新类。$（this）.addClass（“动画助手显示无”）；}});$（“按钮”）.click（函数（事件）{$（“table tr.hide col”）.tggleClass（函数）{//我们以切换方式切换动画类。。。//我们知道在动画结束后//动画助手将不显示额外内容//类，当我们需要删除时//根据切换再次显示元素//状态，所以我们在它们之间建立了关系。if（$（this）.is（“.animation helper display none”））{//我正在切换，然后已经有了上面的课程//我们希望它显示元素，因此我们删除//两个类。。。返回“visibility_switch_off动画助手显示无”；}其他{//这里我们只想隐藏元素，所以我们//添加动画类，另一个将被添加//稍后是animationend事件。。。返回“visibility_switch_off”；}});});});表th{背景色：灰色；}表td{背景色：白色；填充：5px；}.animation助手显示无{显示：无；}表tr.visibility_switch_off{动画填充模式：向前；动画名称：col_hide_anim；动画持续时间：1s；}@-webkit关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-moz关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@-o-keyframe col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}@关键帧col_hide_anim{0%｛不透明度：1；｝100%｛不透明度：0；｝}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><theader><tr><th>名称</th>年龄</th><th>国家</th></tr></theader><tbody><tr><td>姓名</td>年龄</td><td>国家/地区</td></tr></tbody></table>＜button＞切换-使用渐变动画隐藏“年龄”列，并在＜/button＞之后不显示
