javascript - 尝试让 div 在按下按钮时淡入过渡时间和延迟，但无法在显示 :none and display:inline? 之间切换动画

Question

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

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

JSFiddle

感谢您的帮助!

Answer 1

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

查看此 fiddle .

CSS

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

JS

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

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