CSS 转换不会按预期发生

Question

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:after,
.tooltip:before {
  transition: 10s linear all
}
.tooltip:before {
  z-index: 99;
  top: 100%;
  right: 50000px;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  top: 100%;
  right: 50000px;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  right: 50%;
  margin-top: -12px
}
.tooltip:hover:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  right: 20%;
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px
}

<span class="tooltip" title="Lorem ipsum!">Hover me</div>

我正在尝试为正确的位置创建过渡，

如你所见，它有一个非常大的正确值，然后是我需要的那个，

但由于某种原因，过渡不会动画，

你知道我错过了什么吗？

Answer 1

要使 CSS 转换起作用，转换到和从中转换的值必须是长度或百分比（或 calc()）。请参阅 W3C CSS 转换文档中的 this section。

The animated value is interpolated from the from and to values when both the from and the to values of the property have the type described. (When a composite type such as "length, percentage, or calc" is listed, this means that both values must fit into that composite type.) When multiple types are listed in the form "either A or B", both values must be of the same type to be interpolable.

Answer 2

问题是因为你的:before和:after伪元素在:hover出现之前不包含content:""。如果它从未出现，你就无法制作动画。

我还将 transition: 10s linear all 更改为 transition: all 10s linear，因为这是 transition 的 the correct shorthand syntax。

现在转换发生得非常快，由于极高的 right:50000px 设置，它在这 10 秒内经过了很长的时间（几乎察觉不到）。 - 我把这个改小了。

Working JSFiddle - 请注意，动画现在真的很糟糕，但至少可以正常工作。您应该仍然需要按照您想要的方式更改它，但它表明它现在可以工作了。

Answer 3

好的，有几个问题。我没有弄清楚为什么，但是如果你在悬停之前检查元素，则没有 :before 和 :after 甚至可见。所以第 1 步是清理你的 CSS。只有 1 属性在悬停时发生变化，这是正确的值。所以当你声明你的.tooltip:hover:before时，里面应该只有一个属性：改变的右值。

问题 #2 是您不能在转换中从 px 到 %。转换仅影响相同值的数字。所以这就是我所做的：

首先，将工具提示构建为 :before 和 :after 您希望它在悬停时显示的方式。然后一旦它看起来不错，将您的 right: values 更改为动画起点的位置。然后将 :hover:before 和 :hover:after 设置为正确的值。见下文。

问题三：你的动画距离和时间都异常长。我知道您希望它不可见并从左侧滑入，所以让我们用一些实用的动画来解决这个问题。通过定位动画的属性，我们可以使它看起来非常漂亮。

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  margin-top: -12px;
  z-index: 99;
  top: 100%;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px;
  background: #FCE0BA;
  top: 100%;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  right: 50%;
  opacity:1;
}
.tooltip:hover:after {
  right: 20%;
  opacity:1;
}
.tooltip:after,
.tooltip:before {
  transition: 1s linear all;
  opacity:0;
  right:100%;
}

<span class="tooltip" title="Lorem ipsum!">Hover me</div>

CSS 转换不会按预期发生

CSS Transition won't happen as expected

css

css-transitions