CSS3 исчезает без исчезновения - односторонний переход - PullRequest
Новая
       6

CSS3 исчезает без исчезновения - односторонний переход

0 голосов
/ 10 октября 2018

Я хочу анимировать мой HTML только с помощью CSS.Список должен исчезнуть, если я добавлю класс к элементу, но должен немедленно исчезнуть, если я удалю класс.

Я попробовал несколько вещей с переходами в css3.Но мне кажется, что все переходы предназначены как для монтирования, так и для размонтирования элемента.

1 Ответ

0 голосов
/ 10 октября 2018

Волшебный трюк состоит в том, чтобы удалить переход в базовом классе и добавить его в класс show. 

$("button").on("click", function(){
  $("#container").toggleClass("show")
})
#container {
  color: white;
  background: #357700;
  opacity: 0;
  overflow: hidden;
  transition: none;
}

#container.show {
  opacity: 1;
  transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide</button>

<div id="container">
  <p>Hello World</p>
</div>
...