有下面的内容点击淡出div消失时向上移动

Question

<script type="text/javascript">
    if(!document.getElementById('Ad-Detect-js')){
        document.getElementById('RLAD').style.display='block';
    }

    var RLAD = document.getElementById('RLAD');
        document.getElementById('RLAD-wrapper').onclick = function(){
            if(!document.getElementById('Ad-Detect-js')){
                RLAD.className = RLAD.className ? 'fade' : 'fade';
            }
        }
</script>

这是我点击后删除某个div的脚本。问题是下面的内容保持不变，留下了div所在的空白。有没有办法确保下面的所有内容都向上移动？

Answer 1

确保在块完成淡出后删除（或使用display: none）块。您可以使用transitionend事件：

if (!document.getElementById('Ad-Detect-js')) {
  document.getElementById('RLAD').style.display = 'block';
}

var RLAD = document.getElementById('RLAD');
document.getElementById('RLAD-wrapper').onclick = function() {
  if (!document.getElementById('Ad-Detect-js')) {
    RLAD.className = RLAD.className ? 'fade' : 'fade';
  }
}

RLAD.addEventListener('transitionend', function() {
	this.remove();
});

#RLAD {
  width: 50px;
  height: 50px;
  background: red;
}
.fade {
  opacity: 0;
  transition: opacity .3s;
}

<button id="RLAD-wrapper">
click me
</button>
<div id="RLAD"></div>
<div>
content
</div>

或者将计时器设置为淡出动画的持续时间：

if (!document.getElementById('Ad-Detect-js')) {
  document.getElementById('RLAD').style.display = 'block';
}

var RLAD = document.getElementById('RLAD');
document.getElementById('RLAD-wrapper').onclick = function() {
  if (!document.getElementById('Ad-Detect-js')) {
    RLAD.className = RLAD.className ? 'fade' : 'fade';
    setTimeout(function() {
      RLAD.remove();
    }, 300);
  }
}

#RLAD {
  width: 50px;
  height: 50px;
  background: red;
}
.fade {
  opacity: 0;
  transition: opacity .3s;
}

<button id="RLAD-wrapper">
click me
</button>
<div id="RLAD"></div>
<div>
content
</div>