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

我做错了什么？

[编辑]

好吧，我显然应该提到为什么我不使用transition 这样做。这是一系列更广泛的依赖动画的一部分，这些动画一个接一个地按顺序运行。我的理解是，这种按时间顺序排列的重要情况对于animation 而不是transition 更好。

Answer 1

更新：（删除开头的动画）

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>

只需将side-bar-contract 中的to 更改为from

@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 2

为什么不只使用过渡动画：

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>

如果您需要使用关键帧，那么您需要从 350 像素开始第二个 - 您从 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>

Answer 3

首先，我建议您使用悬停样式和 css transition 来执行此操作，而不是像为单个属性设置动画这样简单的动画。

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

.class:hover {
  width: 100px;
}

CSS 过渡实际上会在过渡的中途停止并为您恢复到初始大小。

其次，我建议您不要在 CSS 中为 width 属性设置动画或过渡。 Here's a great article about what properties you should avoid animating.

如果您需要延迟发生在其他元素上的过渡，您可以使用transition-delay 属性。此属性也可以应用于悬停效果...包括对父元素的悬停效果。因此，您可能会在给定时间使用多个悬停效果来实现您想要的效果。