logo标签列表

使用CSS动画显示和隐藏

javascripthtmlcss
3

我的目标是在显示和隐藏 HTML 元素时创建一个动画。显示和隐藏是由一个切换类 hide 的按钮触发的。

以下是我的代码：

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})
.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  display: block;  
}

.hide {
  display: none;
  transition: all 1s ease-out;
  opacity: 0;  
}
<button>Show / Hide</button>
<div class="box hide"></div>

3个回答
5

如果您想使用动画效果，请勿使用display:none，您可以使用visibility。

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})
.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  transition: all 1s ease-out;
  visibility: visible;  
}

.hide {
  visibility: hidden;
  transition: all 1s ease-out;
  opacity: 0;  
}
<button>Show / Hide</button>
<div class="box hide"></div>

2

只需从您的隐藏中删除 display: block，如果您想要动画效果，则添加动画即可：

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})
.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  transition: all 1s ease-out;
  display: block;  
}

.hide {
  transition: all 1s ease-out;
  opacity: 0;  
}
<button>Show / Hide</button>
<div class="box hide"></div>

1

我有同样的目标，但我在这里找不到答案。我希望我的代码能帮助其他人。

注意：如果需要，我可以进行编辑。

我的代码：

<!DOCTYPE html>
<html lang="fr" style="position: absolute; top: 0; left: 0; font-size: 16px; margin: 0; padding: 0; width: 100%;">
  <head>
    <title>Div reveal test</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
  </head>
  <body style="margin: 0; padding: 0; width: 100%; background: #90ee90;">
    <style>
      div.hidden-stuff-container {
        overflow-y: hidden;
        overflow-x: scroll;
        width: calc(100% - 40px);
        margin: 10px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        transition: all 1s;
      }
      div.hidden-stuff-title {
        display: inline-block;
        margin: 0;
        padding: 0;
      }
      span.hidden-stuff-arrow {
        transform: rotate(45deg);
        border-top: 1px solid black;
        border-left: 1px solid black;
        display: inline-block;
        width: 10px;
        height: 10px;
        position: relative;
        top: 5px;
        transition: all 1s;
      }
      button.hidden-stuff-button {
        display: inline-block;
        font-family: initial;
        font-size: 1rem;
        border: none;
        border-radius: 0%;
        padding: 5px;
        margin: 0;
        background: rgba(0, 0, 0, 0);
      }
      button.hidden-stuff-button:hover {
        background:rgba(0, 0, 0, 0.1);
      }
      div.hidden-stuff {
        display: none;
        opacity: 0;
        transition: all 1s;
        margin: 0;
        padding: 10px;
        background:rgba(255, 255, 255, 0.2);
      }
    </style>
    <script type="text/javascript">
      async function show_hidden_stuff(hidden_stuff_id){
        let hidden_stuff_container = document.getElementById(hidden_stuff_id + '-container');
        let hidden_stuff_container_initial_size = document.getElementById(hidden_stuff_id + '-title').offsetHeight;
        let hidden_stuff_container_current_size = hidden_stuff_container.offsetHeight - 20;//-20 because of padding
        let hidden_stuff_arrow = document.getElementById(hidden_stuff_id + '-arrow');
        let hidden_stuff = document.getElementById(hidden_stuff_id);
        let hidden_stuff_container_max_size;
        if(hidden_stuff.style.display == 'block'){
          if(hidden_stuff_container.style.height == 'auto'){//Wait for the openning to end
            //It's required that the div has a fixed size for the animation to work
            hidden_stuff_container.style.height = hidden_stuff_container_current_size + 'px';
            //And it's also somehow required to wait
            await new Promise(wait=>setInterval(wait, 1));
            hidden_stuff.style.opacity = '0';
            hidden_stuff_arrow.style.top = '5px';
            hidden_stuff_arrow.style.transform = 'rotate(45deg)';
            hidden_stuff_container.style.height = hidden_stuff_container_initial_size + 'px';
            await new Promise(wait=>setInterval(wait, 1000));
            hidden_stuff.style.display = 'none';
          }
        }
        else{
          hidden_stuff_container.style.height = hidden_stuff_container_initial_size + 'px';
          hidden_stuff.style.display = 'block';
          //It's somehow required to wait after setting display from none to block for opacity transition to work
          await new Promise(wait=>setInterval(wait, 1));
          hidden_stuff.style.opacity = '1';
          hidden_stuff_arrow.style.top = '-2px';
          hidden_stuff_arrow.style.transform = 'rotate(-135deg)';
          hidden_stuff_container_max_size = hidden_stuff_container_initial_size + hidden_stuff.offsetHeight;
          hidden_stuff_container.style.height = hidden_stuff_container_max_size + 'px';
          await new Promise(wait=>setInterval(wait, 1000));
          //Allow dynamic resizing (ex: when we turn our phone)
          hidden_stuff_container.style.height = 'auto';
        }
      }
    </script>
    <div class="hidden-stuff-container" id="somestuff-container">
      <div class="hidden-stuff-title" id="somestuff-title"><button class="hidden-stuff-button" onclick="show_hidden_stuff('somestuff')">TITLE&#160;&#160;<span class="hidden-stuff-arrow" id="somestuff-arrow"></span></button></div>
      <div class="hidden-stuff" id="somestuff">
        TEXT
      </div>
    </div>
    <div class="hidden-stuff-container" id="anotherone-container">
      <div class="hidden-stuff-title" id="anotherone-title"><button class="hidden-stuff-button" onclick="show_hidden_stuff('anotherone')">Lorem ipsum&#160;&#160;<span class="hidden-stuff-arrow" id="anotherone-arrow"></span></button></div>
      <div class="hidden-stuff" id="anotherone">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus volutpat, viverra ligula vel, placerat lorem. Donec nunc ex, pretium et eros vel, posuere pretium velit. Fusce id commodo neque, eu tincidunt dui. Aliquam at ex pellentesque velit interdum fermentum sed at arcu. Vivamus at mauris justo. Cras ornare eleifend ullamcorper. Morbi dapibus semper aliquet.</p>
        <p>Nam eget quam non enim pellentesque blandit at ut urna. Nam dapibus risus eu libero venenatis dapibus. Cras a turpis eu leo luctus ornare in eu nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies risus ligula, eu hendrerit dui auctor quis. Donec non tempor nulla, sed accumsan lectus. Proin a metus varius, luctus odio at, dapibus lectus. Nunc a ornare turpis. Phasellus eget hendrerit ex, eget commodo augue.</p>
        <p>Nullam euismod egestas risus et lacinia. Suspendisse potenti. Ut sed libero enim. Sed pretium at nisi ut convallis. Sed at magna non metus tincidunt pretium. Etiam ac scelerisque elit. Suspendisse potenti.</p>
        <p>Curabitur purus lacus, lacinia nec sapien vel, maximus consectetur augue. Ut imperdiet malesuada odio, in vulputate mauris facilisis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae lacinia ante. Quisque semper ex lacus, non accumsan mi.</p>
      </div>
    </div>
  </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接