如何使用 Javascript 更改元素的不透明度或可见性

问题描述 投票：0回答：1

我在按钮元素中使用了 3 个 svg，其中一个是未选中的 svg，已选中并正在加载。默认情况下，未选中的设置为 1，而其余的为 0。我想在单击按钮时将未选中的不透明度更改为零，并设置一个小的超时，其中加载 svg 不透明度设置为 1 和超时后，检查的svg设置为1，其余设置为0，反之亦然。但它没有按预期工作，单击按钮时未选中的不透明度不会改变。检查的更改也没有。

这是我的问题代码片段

HTML：

function toggleState(buttonIndex) {
  const uncheckedSvg = document.querySelector(`#button${buttonIndex} .unchecked`);
  const checkedSvg = document.querySelector(`#button${buttonIndex} .checked`);
  const loadingSvg = document.querySelector(`#button${buttonIndex} .loading`);

  loadingSvg.style.opacity = '1';
  
  setTimeout(() => {
loadingSvg.style.opacity = '0';
uncheckedSvg.style.opacity = checkedSvg.style.opacity === '0' || checkedSvg.style.opacity === '' ? '1' : '0';
checkedSvg.style.opacity = uncheckedSvg.style.opacity === '0' || uncheckedSvg.style.opacity === '' ? '1' : '0';
  }, 1000);
}
.check-box {
  display: block;
  height: fit-content;
  position: relative;
}

.svg-container {
  position: relative;
}

.svg-container .unchecked {
  opacity: 1;
  /* Set initial opacity to 1 */
}

.svg-container .checked,
.svg-container .loading {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.checked {
  animation: fadeOutChecked 1s ease-in-out forwards;
}

.loading {
  animation: fadeOutLoading 1s ease-in-out forwards;
}

@keyframes fadeOutChecked {
  to {
    opacity: 0;
  }
}

@keyframes fadeOutLoading {
  to {
    opacity: 0;
  }
}
<button class="check-box" id="button1" onclick="toggleState(1)">

  <div class="svg-container">
    <svg class="unchecked button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="#8b8b8b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
    </svg>

    <svg class="checked button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" fill="#303030"></circle>
        <path d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z" fill="#fff"></path>
    </svg>

    <svg class="loading button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 28 28" fill="none">
        <path
          d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
          stroke="#8b8b8b"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          />
    </svg>
  </div>

</button>

这是我到目前为止所拥有的。我将不胜感激任何帮助。谢谢

javascript html css dom css-animations
1个回答
0
投票

让我们在元素本身上创建一个 

.active {opacity:1}
和 
transition
类，然后在正确的图像上切换该类。

function toggleState(buttonIndex) {
  const uncheckedSvg = document.querySelector(`#button${buttonIndex} .unchecked`);
  const checkedSvg = document.querySelector(`#button${buttonIndex} .checked`);
  const loadingSvg = document.querySelector(`#button${buttonIndex} .loading`);

  uncheckedSvg.classList.remove('active');
  loadingSvg.classList.add('active');
  
  setTimeout(function() {
    loadingSvg.classList.remove('active');  
    checkedSvg.classList.add('active');
  }, 1000)
  
}
.check-box {
  display: block;
  height: fit-content;
  position: relative;

}

.svg-container {
  position: relative;
  width: 30px;
  height: 30px;
}

.svg-container  .button1.active {
  opacity: 1;
}

.svg-container .button1 {
  transition: 250ms;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
<button class="check-box" id="button1" onclick="toggleState(1)">

  <div class="svg-container">
    <svg class="unchecked button1 active" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="#8b8b8b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
    </svg>

    <svg class="checked button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" fill="#303030"></circle>
        <path d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z" fill="#fff"></path>
    </svg>

    <svg class="loading button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 28 28" fill="none">
        <path
          d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
          stroke="#8b8b8b"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          />
    </svg>
  </div>

</button>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.