Question

我想在css中的悬停上实现一个简单的动画，但是当悬停时，动画会跳转并使其看起来很傻。有办法避免这种情况吗？我的希望是，它以与原始转换相同的方式播放。

Codepen：https://codepen.io/misah/pen/abzRXvL

.item {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: blue;
  position: relative;
  transition: 800ms;
}

.item::after {
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  content: "";
  background-color: grey;
  transition: transform 800ms ease-in-out;
}

.item:hover::after {
  transform: scaleY(2);
  transform-origin: bottom;
}

<div class="item">

</div>

Answer 1

之所以会发生这种情况，是因为center仅在悬停该项目时才应用。如果不悬停，它将恢复为默认值::after。将规则移到.item { width: 20%; height: 0; padding-top: 20%; background-color: blue; position: relative; transition: 800ms; } .item::after { position: absolute; bottom: 0; height: 30%; width: 100%; content: ""; background-color: grey; transition: transform 800ms ease-in-out; transform-origin: bottom; } .item:hover::after { transform: scaleY(2); }的声明中。

<div class="item"></div>

model_predictions <- predict(fmi)

悬停时悬停动画“跳转”

1 个答案: