如何制作“取消悬停”动画？ [复制]

Posted 2023-03-06

【中文标题】如何制作“取消悬停”动画？ [复制]

【英文标题】：How can I do a "un hover" animation? [duplicate]

【发布时间】：2020-11-21 09:41:47

【问题描述】：

当有人悬停在我的横幅上时，我想使用过渡 + 变换。这里是例子：

#banner:hover 
transition: all 300ms;
transform: scale(1.01, 1.01); 

但是当我将鼠标移到横幅上时，它突然再次转换为 scale(1,1) 但没有过渡。我已经尝试过：not(hover) 但发生的情况是，当我刷新页面时，横幅会发生过渡。我知道如何解决这个问题。我想要的只是当我将鼠标悬停在它上面时的过渡，以及当我将鼠标从横幅上移开时的过渡，以及其他任何东西。

---

我看到了一些疑问，所以我要澄清一下。当我悬停横幅时，我只想要一个过渡，当我退出移动悬停时，过渡回到他的第一个比例。我在 #banner 和 #banner:hover 中有这段代码：

#banner 
transform: scale(1, 1); 

#banner:hover 
transition: all 300ms;
transform: scale(1.01, 1.01);

这里的问题是，如果我把转换：all 300ms;在我的#banner 上，当我刷新网站时，它会进行转换。

已解决：添加过渡：300ms；在#banner 而不是#banner:hover 中。

【问题讨论】：

嗨！仅将 transition: all 300ms 添加到 #banner。将其从悬停状态中移除，以便在两者上都进行动画处理。

看，如果我在#banner 中使用过渡：所有 300 毫秒，也会发生同样的事情。当我更新网站时，横幅会转变为将其置于您的网站上。

需要默认设置比例为(1,1)：#banner transform: scale(1,1); transition: all 300ms;"

另外，请包含一个minimal reproducible example 以及显示行为的代码。您可以使用 Stack Snippets（图标在编辑器工具栏中看起来像 <>）在 Stack Overflow 上提供一个可运行的示例。

好的......但这根本不是你的问题。没有提到第三种状态。请edit你的问题一步一步准确地反映你想要的。

【参考方案1】：

要同时保留动画，请在初始状态上使用transition，而不是:hover 之一：

#banner 
  background: red;
  transform: scale(1);
  transition: all 300ms;    /* HERE! */


#banner:hover 
  transform: scale(1.2);

<div id="banner">HOVER ME</div>

【讨论】：

同样的情况，我已经编辑了我的问题，请阅读：)

【参考方案2】：

你应该这样做：

#banner 
  transform: scale(1, 1);
  transition: all 300ms;


#banner:hover 
  transform: scale(1.01, 1.01);

【讨论】：

这是不正确的。你只需要在非悬停状态下的transition。

@disinfor 这意味着：部分正确

@RokoC.Buljan 语义 :)

现在好吗？如果是，请删除不赞成票

删除了反对票，尽管已经有一个重复的问题得到了批准。