2

transition我的 CSS属性有问题。
我需要为section-tag 声明两个转换。与该部分的每个过渡都应该有 1s 的持续时间，只有背景应该有 0.3s 的持续时间

所以我的 CSS-transition代码看起来像这样：

section{
   background: black;
   transition: all 1s ease, background 0.3s ease;
}
section:hover{
   background: green;
   transform: translateY(100px);
}

但是当我现在悬停链接时，背景会在 1 秒内变为动画，并且会奇怪地闪烁。
这里是codepen Demo

有人知道为什么会这样吗？我怎样才能实现我的目标？
是的，我需要all财产！

编辑

刚发现一个奇怪的。在上面链接的 codepen 中，它会闪烁。但是当我也为 设置动画时padding，它会停止闪烁！但是背景会在 1s 内动画...
这是第二个演示

4

2 回答 2

2

我已经在代码笔中尝试过这个，问题不在转换属性中。

最好使用div 标签作为链接背景并为此创建单独的过渡。

当然 div 标签将为您的问题提供最佳解决方案。

于 2013-08-19T11:16:22.933 回答
1

出现问题是因为当您将鼠标悬停在元素上时，它开始向下移动。 当元素未悬停时，它将恢复原状。 现在，当您悬停时，元素开始移动，然后立即失去悬停，使其返回原始状态，但再次获得悬停效果，因为它再次接收到也会导致眨眼的鼠标悬停事件，以及您观察到的奇怪现象。如果将鼠标靠近底部放置，则会观察到所需的效果。

修复应该是您为包含这些元素的容器编写悬停并将效果应用于这些元素。

此外，您仅在一种状态下应用了转换，这也可能是眨眼的原因；

尝试使用对两个语句的转换，如下所示：

section{

  width:300px;
  height:300px;
  background:black;
  color:white;
  transition: background 0.3s ease, all 3s ease;
}
section:hover{
  background:green;
  transition: background 0.3s ease, all 3s ease;
}
于 2013-08-19T11:31:42.680 回答