CSS анимация - вернуть мышью

Question

Я уверен, что это, должно быть, задавали раньше, и я нашел связанные вопросы, но я, кажется, не могу взломать это.

У меня есть элемент, который получает класс, и, при этом, расширяется.Позже, когда этот класс будет удален, он должен вернуться (оживить) обратно к своей первоначальной ширине.

let el = document.querySelector('#side-bar');
el.addEventListener('click', evt => el.classList.toggle('contracted'));

#side-bar {
  height: 100%;
  width: 75px;
  background: red;
  position: fixed;
  left: 0;
  top: 0;
}

#side-bar.contracted {
  animation: .5s side-bar-contract forwards;
}

#side-bar:not(.contracted) {
  animation: .5s side-bar-expand forwards;
}

@keyframes side-bar-expand {
  to {
    width: 350px;
  }
}

@keyframes side-bar-contract {
  to {
    width: 75px;
  }
}

<div id='side-bar' class='contracted'></div>

Анимация расширения работает отлично.Но анимация реверсии не происходит;он просто возвращается к своим первоначальным свойствам, без анимации.

Fiddle

Что я делаю не так?

[EDIT]

Хорошо, я должен был, очевидно, упомянуть, почему я не делаю это с transition.Это часть более широкого набора зависимых анимаций, которые запускаются в последовательности, одна за другой.Насколько я понимаю, такого рода хронологически нетривиальная ситуация лучше для animation, чем transition.

Answer 1

Во-первых, я бы порекомендовал вам сделать это со стилями наведения и css transition вместо анимации для чего-то столь же простого, как анимация одного свойства.

.class {
  width: 400px;
  transition: width 1500ms ease-in-out;
}

.class:hover {
  width: 100px;
}

CSS-переход фактически остановит часть пути черезпереход и возврат к исходному размеру для вас.

Во-вторых, я бы порекомендовал вам не анимировать или не переходить свойство width в CSS. Вот отличная статья о том, какие свойства следует избегать анимации .

Если вам нужно отложить переход на другие элементы, вы можете использовать свойство transition-delay.Это свойство также может применяться в эффектах наведения ... в том числе с эффектами наведения на родительские элементы.Таким образом, вы можете потенциально использовать несколько эффектов наведения в данный момент времени для достижения желаемого эффекта.

Answer 2

ОБНОВЛЕНИЕ: (удаление анимации в начале)

let init = 0,
    el = document.querySelector('#side-bar');

el.addEventListener('click', function() {
    if (init < 1) {
        init++;
        el.classList.remove("init");
        el.classList.add('contracted');
    }
    el.classList.toggle('contracted');

});

#side-bar {
	height: 100%;
	width: 75px;
	background: #d4653c;
	position: fixed;
	left: 0;
	top: 0;
	padding: .8rem;
}

#side-bar:not(.init) {
	animation: .5s side-bar-expand forwards;
}

#side-bar.contracted {
	animation: .5s side-bar-contract forwards;
}

@keyframes side-bar-expand {
	to {
		width: 350px;
	}
}

@keyframes side-bar-contract {
	from {
		width: 350px;
	}
}

<div id='side-bar' class='init'>Click me</div>

Просто измените to на from в side-bar-contract

@keyframes side-bar-expand { to { width: 350px; } }
@keyframes side-bar-contract { from { width: 350px; } }

let el = document.querySelector('#side-bar');
el.addEventListener('click', evt => el.classList.toggle('contracted'));

#side-bar {
	height: 100%;
	width: 75px;
	background: #d4653c;
	position: fixed;
	left: 0;
	top: 0;
	padding: .8rem;
}

#side-bar:not(.contracted) {
	animation: .5s side-bar-expand forwards;
}

#side-bar.contracted {
	animation: .5s side-bar-contract forwards;
}

@keyframes side-bar-expand {
	to {
		width: 350px;
	}
}

@keyframes side-bar-contract {
	from {
		width: 350px;
	}
}

<div id='side-bar' class='contracted'>Click me</div>

Answer 3

Почему бы просто не использовать анимацию перехода:

let el = document.querySelector('#side-bar');
el.addEventListener('click', evt => el.classList.toggle('contracted'));

#side-bar {
  height: 100%;
  width: 350px;                         /* have width at 350px when not contracted */
  background: #d4653c;
  position: fixed;
  left: 0;
  top: 0;
  padding: .8rem;
  transition: width .5s;   /* animate the width */
}

#side-bar.contracted {
  width: 75px;
}

<div id='side-bar' class='contracted'>Click me</div>

Если вам нужно использовать ключевые кадры, тогда вам нужно начать второй с 350px - вы начинаете с 75 до 75, поэтомуне оживляет:

let el = document.querySelector('#side-bar');
el.addEventListener('click', evt => el.classList.toggle('contracted'));

#side-bar {
  height: 100%;
  width: 75px;
  background: #d4653c;
  position: fixed;
  left: 0;
  top: 0;
  padding: .8rem;
}

#side-bar:not(.contracted) {
  animation: .5s side-bar-expand forwards;
}

#side-bar.contracted {
  animation: .5s side-bar-contract forwards;
}

@keyframes side-bar-expand {
  to {
    width: 350px;
  }
}

@keyframes side-bar-contract {
  0% {
    width: 350px;
  }
  100% {
    width: 75px;
  }
}

<div id='side-bar' class='contracted'>Click me</div>