Плавное исчезновение объекта JS

Question

Нужно чтобы объект, скажем div, сначала изменил свою непрозрачность на 0, а затем исчез. Думал сделать через display: none, но от лучшего способа плавного скрытия объекта с его полным исчезновением из DOM не откажусь. Спасибо.

Вот упрощенный код:

.block {
     width: 100px;
     height: 100px;
     background-color: red;
 }

Приношу извинения за неправильно сформулированный вопрос. Я знаю, что display: none не анимируется, и задал вопрос, чтобы получить максимально эффективный способ решения проблемы плавного и полного исчезновения объекта, в том числе сделав его невидимым для событий.

Answer 1

$('button.one').click(()=>{
    $('.example').fadeOut(2000);
});

$('button.two').click(()=>{
    $('.example').fadeOut();
});

$('button.reset').click(()=>{
    $('.example').fadeIn();
});

.example{
    background:grey;
    width: 50px;
    height: 50px;
}

body{
    background:#232323
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example"></div>
<button class="one">click1</button>
<button class="two">click2</button>
<button class="reset">reset</button>

Answer 2

Свойство display не анимируется, но ты можешь порабоать со свойством visibility + opacity. Тебе это подойдет.

Если тебе заранее известнs размеры, то можно использовать ее. Если же нет. то, заменить ее на вариант анимации 2. Второй более универсальный. Свойство visibility сделает его невосприимчивым к событиям, но оставит геометрию, а позиционипрование выбьет из потока. Это если не заморачиваться.

div {
  width: 200px;
  height: 200px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.first {
  background-color: tomato;
  animation: fade1 1s 2s forwards;
}

.second {
  background-color: aqua;
  animation: fade2 1s 2s forwards;
}

@keyframes fade1 {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    height: 200px;
    width: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
    width: 0;
  }
}

@keyframes fade2 {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: hidden;
    position: relative;
  }
  100% {
    opacity: 0;
    position: fixed;
  }
}

<div class="first">Hide me with height</div>
<div class="second">Hide me with visibility</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum dolorum voluptate laboriosam enim sed blanditiis quam adipisci, ab numquam asperiores vel? Dolorem voluptas fugit vero, ipsa ea maiores ad. Nobis!</p>

БЛОГ НА HUSL

Плавное исчезновение объекта JS

Ответы (2 шт):