以平滑的方式显示 div [重复]答案

【问题标题】：Displaying div in a smooth manner [duplicate]以平滑的方式显示 div [重复]
【发布时间】：2021-03-12 17:43:08
【问题描述】：

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <style >
    body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      display: none;
    }
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }
  </style>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
  <script>
    function myFunction(){
      document.getElementById("myDIV").style.display = "block";
    }
  </script>
</html>

问题
如您所见，当我单击按钮时，会出现 div。但这我希望开发人员以流畅的方式出现。
我尝试了this 解决方案，但它对我不起作用。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用 CSS 过渡 使其平滑。

如果你想要transitions，你不能使用display: none;来隐藏它，因为display它是完全隐藏或完全可见,
相反，您可以使用height 或opacity。

要切换其可见性，我还建议使用显示状态的样式切换类，而不是直接在脚本中设置它们，
它使维护和添加更多视觉效果更容易

function myFunction() {
  document.getElementById("myDIV").classList.toggle("shown")
}

body {
  background: black;
}

.shown {
  height: 200px;
  opacity: 1;
}

div {
  background: red;
  height: 0px;
  opacity: 0;
  margin: 20px 100px;
  width: auto;
  transition: all 1s;
}

button {
  color: red;
  font-weight: bold;
  background: grey;
  padding: 5px 20px;
  font-size: 1rem;
}

<div id="myDIV">
</div>
<button type="button" onclick=myFunction() name="button">CLICK ME</button>

【讨论】：

感谢您的帮助。这工作得很好。

【解决方案2】：

这是一个使用不透明度的解决方案。这似乎是一个很好的用例，因为它还消除了此示例中的内容移动（按钮更改位置）。

function myFunction(){
      document.getElementById("myDIV").classList.add('div-show');
    }

body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      //display: none;
      opacity:0;
      transition:opacity.3s;
    }
    .div-show{
      opacity:1;
    }
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
</html>

【讨论】：

感谢您的尝试。但是如果我们添加不透明度。它只是不可见的，仍然占据网页上的空间。我希望在单击按钮时以流畅的方式创建 div

【解决方案3】：

你想让它慢慢淡入吗？如果是这样，而不是使用显示使用不透明度，并通过 css 动画使其缓慢增加。教程在这里https://www.w3schools.com/css/css3_animations.asp

【讨论】：

【解决方案4】：

您可以添加 css 动画和关键帧。在样式中的 div 中添加以下内容

animation-name: example; animation-duration: 2s;

并添加以下内部样式标记：

 @keyframes example {0%   {opacity: 0; } 100% {opacity: 1;}}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <style >
    body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      display: none;
      animation-name: example;
  animation-duration: 2s;
    }

@keyframes example {
  0%   {opacity: 0; }
  100% {opacity: 1;}
}
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }
  </style>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
  <script>
    function myFunction(){
      document.getElementById("myDIV").style.display = "block";
    }
  </script>
</html>

【讨论】：

这看起来确实有效。但是 div 突然出现在我们不知道的地方。
最好使用过渡而不是不透明度。

【解决方案5】：

在您粘贴的代码中； <style> 标签放错了位置。让<style> 标签工作；您需要将它放在<head> 或<body> 标签内。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    body {
      background: black;
    }
    
    div#myDIV {
      background: red !important;
      font-szie: 50px;
      background: red;
      height: 200px;
      margin: 20px 100px;
      width: auto;
      opacity: 0;
      transition: 1s opacity;
    }
    
    div.animate__fadeIn {
      opacity: 1 !important;
      transition: 1s opacity;
    }
    
    button {
      color: red;
      font-weight: bold;
      background: grey;
      padding: 5px 20px;
      font-size: 1rem;
    }
  </style>
</head>

<body>
  
  <button type="button" onclick="myFunction()" name="button">CLICK ME</button>
  <div id="myDIV">Hello World</div>
  <script>
    function myFunction() {
      document.getElementById("myDIV").classList.toggle("animate__fadeIn");
    }
  </script>
</body>

</html>

【讨论】：

这个 div 已经在页面中占据了一个空间。感谢您的尝试。我得到了解决方案。