试图让一个 div 在按钮按下时淡入并带有转换时间和延迟，但不能在 display:none 和 display:inline 之间进行动画切换？答案

【问题标题】：Trying to have a div fade in on button press with transition time and delay, but can't animate switch between display:none and display:inline?试图让一个 div 在按钮按下时淡入并带有转换时间和延迟，但不能在 display:none 和 display:inline 之间进行动画切换？
【发布时间】：2016-07-13 20:40:01
【问题描述】：

我在当前设置的网站上有一个div，它从opacity:0; 开始，并在button 按下时转换为opacity:1;。我之所以选择它，是因为我发现您无法从 display:none; 切换到 display:inline; 在 button 按下时进行转换。但是，现在当在较小的窗口中查看页面时，会有一个滚动条，因为内容仍然存在，只是无法查看。我有什么选择？我可以以某种方式让div 拥有display:none; 并且仍然淡入吗？

我对 jQuery 一无所知，所以如果这能以某种方式解决这个问题，你们能否简单地为我拼写出来？我会在下面放一个 JSFiddle。

JSFiddle

感谢您的帮助！

【问题讨论】：

我不确定visibility 是不是我要找的。这仍然会产生一个带有较小浏览器窗口的滚动条，而且它似乎也没有动画效果；它不会等待animation-delay 或transition-delay，也不会随着transition 淡入。不过，感谢您的回复，@John！
@John visibility:hidden; 仍然占用 DOM 中的空间，这仍然会为他生成滚动条
是的，抱歉，情况正好相反。 display 将删除该项目，因为它不存在
像this 这样的东西会起作用吗？
我无法立即在 jsFiddle 中看到问题——哪个 DIV 有不受欢迎的滚动条？

标签： javascript jquery html css

【解决方案1】：

一种可能的解决方案（如果您不介意稍微不同类型的动画）将您的 div 设置为 transform:scale(0);，然后使用显示类为 opacity 和 scale 设置动画。

看到这个fiddle。

CSS

#abouttextbackground {
    ...
  opacity:0;
  transform:scale(0);
}
    #abouttextbackground.show{
      opacity:1;
      transform:scale(1);
    }

var about_text = document.getElementById("abouttextbackground");                
about_text.classList.toggle('show');

如果你想保持动画不变，那么@gibberish 的解决方案会更好。

【讨论】：

你和@gibberish 的解决方案都是有效的并且非常有用，但我选择这个作为解决方案，因为我发现这种动画风格实际上更适合。非常感谢您的帮助！
np 很高兴为您提供帮助。如果水平滚动条成为问题，您可以添加此样式：#abouttext img{ max-width: 100%; } 并将overflow: hidden; 添加到您的#abouttextbackground 中，作为演示版here，您可能需要考虑一些@media 查询以减少您的标题和小屏幕上的字体大小。
@media 查询是否与 jQuery 有关？听起来我很快就要开始学习 jQuery 了。
@ThatGuy7 不是 CSS。它允许您在某些屏幕尺寸下定义某些样式。因此，对于较小的屏幕，您可以将标题字体稍小一些，使其更适合 div 区域

【解决方案2】：

您可以关闭该 DIV 的垂直滚动条的可见性。在您的 jsFiddle 示例中，我为 body 元素执行此操作：

jsFiddle Demo

CSS：

body {overflow-y:hidden;}

JS：

var scrollvis = 'hidden';
function funcAbout() {
    scrollvis = (scrollvis=='hidden') ? 'auto' : 'hidden';
    $('body').css({'overflow-y':scrollvis});

【讨论】：