Question

我正在尝试通过过渡移除元素。但是仍然存在差距。

function handleClick() {
  var el1 = document.getElementById('answer-0')
  var el2 = document.getElementById('answer-1')
  el1.classList.add("out");
  el2.classList.add("out");
}

var classname = document.getElementsByClassName("answer");

var myFunction = function() {
  var attribute = this.getAttribute("data-myattribute");
  alert(attribute);
};

var select = document.getElementById('answer-2')

select.addEventListener('click', handleClick)

* {
  transition: all 1s;
}

.container {
  display: flex;
  flex-direction: column;
  width: 500px;
  border: 1px solid black;
}

.answer {
  margin: 5px 0;
  padding: 10px 0;
}

@keyframes leave {
  0% {
    pointer-events: none;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-30px);
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

.out {
  animation: leave .3s forwards;
}

<div class='container'>
  <button id='answer-0' class='answer'>
       answer
      </button>
  <button id='answer-1' class='answer'>
       answer
      </button>
  <button id='answer-2' class='answer'>
       click this
      </button>
</div>

链接到小提琴： https://jsfiddle.net/h5j302dc/19/

我尝试添加第二个动画，并添加了延迟，以增加位置：absolute绝对会摆脱该空间，但是会“捕捉”并且不会过渡。

如何在不使用变换或负边距的情况下摆脱“单击我”按钮的空白？

删除不可见的空间

0 个答案: