如何实现加载圆形图标点击提交后的平滑过渡显示？

问题描述 #

我给页面添加了一个加载圆形图标，默认通过style.display = 'none'隐藏，点击提交按钮后设置为inline-block显示，3秒后再次隐藏。功能正常，但想让图标平滑显示/隐藏，尝试用CSS transition却没效果。

现有代码如下：

JavaScript #

const submitButton = document.querySelector('#submit-button')
const load = document.querySelector('#load')

load.style.display = 'none'

submitButton.addEventListener('click', () => {
      load.style.display = 'inline-block'

      setTimeout(() => { load.style.display = 'none'}, 3000)
})

CSS #

body {
      background-color: #313038;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
}

.button {
      padding: 10px 13px;
      
      color: white;
      background-color: transparent;
      transition: 0.1s;

      border: 1px solid #fff;
      border-radius: 5px;

      cursor: pointer;
}

.button:hover {
      background-color: #fff;
      transition: 0.1s;
      color: black;
}

.lds-roller {
      display: inline-block;
      transition: display ease 2s;

      transition: 0.5s;

      margin-top: 100px;

      width: 80px;
      height: 80px;
}

.lds-roller div {
      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      transform-origin: 40px 40px;
}

.lds-roller div:after {
      content: " ";
      display: block;
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
      animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
      top: 63px;
      left: 63px;
}

.lds-roller div:nth-child(2) {
      animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
      top: 68px;
      left: 56px;
}

.lds-roller div:nth-child(3) {
      animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
      top: 71px;
      left: 48px;
}

.lds-roller div:nth-child(4) {
      animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
      top: 72px;
      left: 40px;
}

.lds-roller div:nth-child(5) {
      animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
      top: 71px;
      left: 32px;
}

.lds-roller div:nth-child(6) {
      animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
      top: 68px;
      left: 24px;
}

.lds-roller div:nth-child(7) {
      animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
      top: 63px;
      left: 17px;
}

.lds-roller div:nth-child(8) {
      animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
      top: 56px;
      left: 12px;
}

@keyframes lds-roller {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

HTML #

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

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="test.js" defer></script>
      <link rel="stylesheet" href="./test.css">
</head>

<body>
      <button type='submit' class='button' id='submit-button'>Submit</button>


      <div id='load' class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
      </div>
</body>

</html>

解决方法 #

问题根源 #

CSS transition不支持display属性，因为display是离散值（none/block/inline-block等），没有中间过渡状态，所以设置transition: display完全无效。要实现平滑显示/隐藏，得用支持过渡的属性，比如opacity（透明度）、visibility（可见性）或transform（变换）。

修改方案 #

用opacity + visibility实现淡入淡出的平滑效果，同时保留元素占位（避免页面布局跳动）：

1. 修改CSS

更新.lds-roller的初始状态，添加过渡属性，新增控制显示的类：

.lds-roller {
      display: inline-block;
      /* 初始透明且不可见 */
      opacity: 0;
      visibility: hidden;
      /* 给opacity和visibility添加过渡动画 */
      transition: opacity 0.5s ease, visibility 0.5s ease;
      
      margin-top: 100px;
      width: 80px;
      height: 80px;
}

/* 显示状态类 */
.lds-roller.show {
      opacity: 1;
      visibility: visible;
}

/* 其余原有CSS样式保持不变 */

2. 修改JavaScript

不再直接修改display，通过添加/移除类控制显示状态：

const submitButton = document.querySelector('#submit-button')
const load = document.querySelector('#load')

// 初始状态靠CSS控制，无需设置display:none
submitButton.addEventListener('click', () => {
      load.classList.add('show')

      setTimeout(() => { 
            load.classList.remove('show')
      }, 3000)
})

3. HTML无需修改

保持原有结构即可。

效果说明 #

点击提交按钮后，图标会在0.5秒内从完全透明淡入到可见；3秒后再用0.5秒淡出到透明，整个过程平滑无突兀感。如果想要调整动画速度，修改CSS中transition的时间值即可（比如把0.5s改成0.3s会更快）。

内容的提问来源于stack exchange，提问作者Lvasche