Question

＆＃13;

.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
}

＆＃13;

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

＆＃13;

我正在尝试为正确的位置创建转换，

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

但出于某种原因，过渡不会起作用，

你知道我错过了吗？

Answer 1

问题是由于您的:before和:after伪元素在content:""发生之前不包含:hover而导致的。如果它从未出现过，你就无法制作动画。

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

现在转换发生得非常快，由于right:50000px设置极高，它在这10秒内传播的时间很短（几乎不可察觉）。 - 我将此更改为较低的金额。

Working JSFiddle - 请注意，动画现在非常糟糕，但至少让它起作用了。您仍然需要按照您希望的方式进行更改，但它显示它现在可以正常工作。

Answer 2

要使CSS转换起作用，转换到和来自的值必须是长度或百分比（或calc（））。请参阅W3C CSS Transitions doc中的this section。

当属性的from和to值都具有所描述的类型时，将从from和to值中插入动画值。（当列出复合类型，例如“长度，百分比或计算结果”时，这意味着两个值必须符合该复合类型。）当“A或B”形式中列出多个类型时，两个值必须为可插值的相同类型。

Answer 3

好的，有几个问题。我没有完成弄清楚原因，但是如果你在悬停之前检查元素，则没有：之前和之后甚至可见。所以第1步是清理你的CSS。只有1个属性在悬停时发生变化，这是正确的值。因此，当您声明StaysOpen时，应该只有一个属性：更改的正确值。

问题＃2是你不能在转换中从px转到％。转换仅影响相同值的数字。所以这就是我做的事情：

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

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

.tooltip:hover:before

.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%;
}

CSS Transition不会像预期的那样发生

3 个答案: