CSS3 : Base state, 动画和返回

Question

基本上，我有一个具有给定宽度和高度的元素。当我向它添加“缩放”类时，我希望它更改其大小和位置。我使用适当的 webkit 动画(关键帧)让它工作。

问题是当我删除“zoomed”类时，它突然恢复到原来的大小和位置，我很想用动画来做到这一点。

请注意，这是一个可能可以通过使用过渡属性来解决的示例，但在我的真实情况下，它不能，因为我有一个相当复杂的关键帧动画。

那么，如何拥有基本状态，如何在添加类时动画到新状态并在删除类时将动画反转到基本状态？谢谢。

Answer 1

您遇到的问题不会通过转换得到解决。

使过渡以两种方式工作的原因是，通常您在类中设置它，并在状态中更改属性。这样，您就可以始终设置过渡，并且只更改属性。

如果仅将过渡设置为已更改状态，一旦将其移除，过渡将不再存在于元素中，因此更改会立即生效。

如果添加类确实是您想要的过程(出于某些其他原因)，那么您有 3 种可能性

1. 如评论中所建议，在更改为基本状态时，您应该添加另一个类，该类的唯一属性是反向播放动画。

2. 在基本元素中设置反向动画，在添加的类中设置动画。

3. 转到一个精心设计的系统，在该系统中，您真正删除了动画结束事件中的类，并且您所做的操作触发了它(我认为太复杂了)

   一旦您从元素中移除该元素，该元素就不可能是动画 - 过渡 - 无论如何