CSS переход на JavaScript меняет стиль

Question

Здравствуйте, у меня есть div и кнопка закрытия на этом div

и простая функция CloseMyDiv, чтобы скрыть мой div

function CloseMyDiv(){
  document.getElementById('myDiv').style.display = 'none';
}

Как добавить анимированные переходы css

Answer 1

Как уже упоминалось @rmn, вы не можете анимировать свойство display и не хотите, чтобы ваш div занимал пространство после его закрытия, поэтому вы можете применить следующий пример кода: -

HTML -

<div id="myDiv">Just a div</div>
<button id="btn" type="button">Close Div</button>

CSS -

div{
  width:200px;
  height:200px;
  background:white;
  color:black;
  border:1px solid black;
  transition:all 2s;
  overflow:hidden;
}

.closed{
  height:0px;
  width:0px;
  border:0;
}

Javascript -

function closeMyDiv(){
  document.getElementById('myDiv').classList.toggle('closed');
}

document.getElementById('btn').onclick = function(){
  closeMyDiv();
}

Вот скрипка - http://jsfiddle.net/m07nhzsk/13/

Надеюсь, это поможет.Ура !!

Answer 2

Если вам нужна скользящая анимация, вы можете попробовать использовать очень короткий код jQuery (хотя это все же Javascript).

$('#closeBtn').click(function(){
    $('.toBeClosed').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="toBeClosed">Div element</div>
<button id="closeBtn">Close</button>

Вы можете легко удалить функцию щелчка, если хотите, чтобы код запускался без щелчка.

Answer 3

Вы не можете анимировать свойство display, но вы можете изменить непрозрачность элемента.Как сказал @Gerard в комментариях, используйте класс CSS.Итак, как-то так.

const div = document.querySelector('div')
document.querySelector('button').addEventListener('click', function(){
    div.classList.toggle('hidden')
})

div { transition: 0.5s }
.hidden { opacity: 0 }

<button>Show/hide</button>
<div>i am a div.</div>

Если вы не хотите, чтобы div занимал пространство, пока оно скрыто, вы можете добавить, скажем, transform:scale(0) или height:0до .hidden.