Question

我正在执行类似以下代码段的操作，但是我的div会正确淡入，但是当淡出时，背景会立即消失而不会发生过渡。

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

document.getElementById('button').onclick = function() {
   toggleClass(document.querySelector('div.main'), 'hidden shown');
}

.main {
  width: 300px;
  height:500px;
  background-color: transparent;
  transition: opacity 3000ms ease;
  }
  

  .hidden {
    opacity: 0;
  }

  .shown {
    opacity: 1;
    background-color: black;
  }

<button type="button" id="button">Click Me!</button>

<div class="main hidden">
HEYYYA
</div>

Answer 1

发生这种情况是因为当ease-out时，css样式background-color: black消失了。

要使其正常运行，请在主类和background-color类上设置.show, .hide，仅更改opacity。

function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }

  var classString = element.className,
    nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  } else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
  }
  element.className = classString;
}

document.getElementById('button').onclick = function () {
  toggleClass(document.querySelector('div.main'), 'hidden shown');
}

.main {
  width: 300px;
  height: 500px;
  background-color: black;
  transition: opacity 3000ms ease;
}

.hidden {
  opacity: 0;
}

.shown {
  opacity: 1;
}

<button type="button" id="button">Click Me!</button>

<div class="main hidden">
  HEYYYA
</div>

Answer 2

快到了。您还需要在背景颜色中添加transition，它的作用就像是一种魅力。

看到这个-


    .main {
      width: 300px;
      height:500px;
      background-color: transparent;
      transition: opacity 3000ms ease, background-color 3000ms ease;
    }
      

    .hidden {
      opacity: 0;
    }

    .shown {
      opacity: 1;
      background-color: black;
    }

Answer 3

更简单：

const mainDiv    = document.getElementById('main-div')
  ,   btShowHide = document.getElementById('bt-show-hide')
  ;
btShowHide.onclick=_=>
  {
  btShowHide.textContent = mainDiv.classList.toggle('shown') ? 'hide' : 'show'
  }

#main-div {
  width: 300px;
  height: 500px;
  opacity: 0;
  background-color: lightskyblue;
  transition: opacity 3000ms ease;
}
.shown {
  opacity: 1 !important;
}

<button id="bt-show-hide">show</button>

<div id="main-div" class="hide"> HEYYYA  </div>

CSS过渡淡入但不淡出

3 个答案: