html - 即使使用内联块，CSS 翻译也会在悬停关闭时快速恢复

Question

我正在开发 Rails 5 应用程序：

1. 引导程序（使用 jQuery）
2. SASS
3. 波旁酒

.align-middle {
  vertical-align: middle !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-center {
  text-align: center !important;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.domain-info-group {
  display: inline-block;
  width: 6.5em;
  height: 6.5em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
}

.domain-cluster {
  width: 50em;
  height: 50em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
}

.domain-name {
  opacity: 0;
}

.domain-circle {
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-size: 4em;
  transition: box-shadow 0.3s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(1) {
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: all 1s ease 0.1s;
}

.domain-cluster:hover .domain-info-group:nth-child(1) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(1) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(2) {
  -webkit-transform: translate(-10em, 0em);
  transform: translate(-10em, 0em);
  transition: all 1s ease 0.2s;
}

.domain-cluster:hover .domain-info-group:nth-child(2) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(2) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(3) {
  -webkit-transform: translate(10em, 0em);
  transform: translate(10em, 0em);
  transition: all 1s ease 0.3s;
}

.domain-cluster:hover .domain-info-group:nth-child(3) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(3) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(4) {
  -webkit-transform: translate(0em, -10em);
  transform: translate(0em, -10em);
  transition: all 1s ease 0.4s;
}

.domain-cluster:hover .domain-info-group:nth-child(4) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(4) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(5) {
  -webkit-transform: translate(0em, 10em);
  transform: translate(0em, 10em);
  transition: all 1s ease 0.5s;
}

.domain-cluster:hover .domain-info-group:nth-child(5) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(5) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(6) {
  -webkit-transform: translate(-7.5em, -7.5em);
  transform: translate(-7.5em, -7.5em);
  transition: all 1s ease 0.6s;
}

.domain-cluster:hover .domain-info-group:nth-child(6) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(6) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(7) {
  -webkit-transform: translate(7.5em, -7.5em);
  transform: translate(7.5em, -7.5em);
  transition: all 1s ease 0.7s;
}

.domain-cluster:hover .domain-info-group:nth-child(7) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(7) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(8) {
  -webkit-transform: translate(7.5em, 7.5em);
  transform: translate(7.5em, 7.5em);
  transition: all 1s ease 0.8s;
}

.domain-cluster:hover .domain-info-group:nth-child(8) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(8) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(9) {
  -webkit-transform: translate(-7.5em, 7.5em);
  transform: translate(-7.5em, 7.5em);
  transition: all 1s ease 0.9s;
}

.domain-cluster:hover .domain-info-group:nth-child(9) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(9) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

<div class="domain-cluster">
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="2">
      Pe
    </div>
    <div class="domain-name text-muted">
      Personal
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="3">
      Fa
    </div>
    <div class="domain-name text-muted">
      Family
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="4">
      Wo
    </div>
    <div class="domain-name text-muted">
      Work
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="5">
      Sp
    </div>
    <div class="domain-name text-muted">
      Spiritual
    </div>
  </div>
</div>

我正在这样做https://jsfiddle.net/stoicAlchemist/4ptz0wvn/并且，正如您所看到的，悬停时的转换工作正常，但是当悬停关闭时，它只是回到原始位置。我一直在寻找一个类似的问题，但似乎找不到一个足够接近的问题来解释我的困惑，我什至inline-block在该display物业上尝试过，但它不起作用，它一定是愚蠢的，我没有看到它. 任何人都知道为什么翻译回不能与过渡一起使用？

Answer 1

这取决于您要远离什么。如果您将body标签或最外层包装器设置为position:absolute;height:100%;width:100%与body:hover .domain-cluster .domain-info-group:nth-child(n) .domain-circle动画一起保持完整，直到鼠标离开浏览器窗口。离开浏览器后，CSS 没有选择，只能恢复到其原始状态，因为 :hover 状态只是暂时的，正如名称所暗示的那样（您不再悬停）。与 :active 和 :focus 相同，一旦鼠标离开浏览器，它们就不会知道任何内容的上下文。没有数据绑定到 DOM。

您可以通过在其中一个动画上使用某种动画延迟来使用纯 CSS 实现此效果，例如将其设置为在鼠标重新进入窗口之前不会过期的超高值。但是，一旦鼠标离开窗口，投入一两行向元素添加某种 .blur 类的 JS 会简单得多（这反过来可能会否定迫使您的动画返回其原始样式的继承样式状态）

Answer 2

亨特弗雷泽所说的一切都让我知道这里的问题出在哪里。显然，将 a 添加:hover到选择器意味着一旦将鼠标悬停在它上面就会发生转换，但是如果不是，则转换不会发生，因此有必要添加一个“回到原点”的转换，我做了通过添加过渡，它不仅仅是“一眨眼就翻译回来”。请查看 jsfiddle 的原始链接以获取更新版本。

.align-middle {
  vertical-align: middle !important;
}
.text-muted {
  color: #6c757d !important;
}
.text-center {
  text-align: center !important;
}
.badge-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.domain-info-group {
  display: inline-block;
  width: 6.5em;
  height: 6.5em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
          transform: translate(-30%, -30%);
  transition: all 1s ease-out 0.1s
}

.domain-cluster {
  width: 50em;
  height: 50em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
          transform: translate(-30%, -30%);
}

.domain-name {
  opacity: 0;
}

.domain-circle {
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-size: 4em;
  transition: box-shadow 1.2s ease-in-out 0.1s;
}

.domain-cluster:hover .domain-info-group:nth-child(1) {
  -webkit-transform: translate(0);
          transform: translate(0);
  transition: all 1s ease 0.1s;
}
.domain-cluster:hover .domain-info-group:nth-child(1) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(1) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(2) {
  -webkit-transform: translate(-10em, 0em);
          transform: translate(-10em, 0em);
  transition: all 1s ease 0.2s;
}
.domain-cluster:hover .domain-info-group:nth-child(2) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(2) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(3) {
  -webkit-transform: translate(10em, 0em);
          transform: translate(10em, 0em);
  transition: all 1s ease 0.3s;
}
.domain-cluster:hover .domain-info-group:nth-child(3) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(3) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(4) {
  -webkit-transform: translate(0em, -10em);
          transform: translate(0em, -10em);
  transition: all 1s ease 0.4s;
}
.domain-cluster:hover .domain-info-group:nth-child(4) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(4) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(5) {
  -webkit-transform: translate(0em, 10em);
          transform: translate(0em, 10em);
  transition: all 1s ease 0.5s;
}
.domain-cluster:hover .domain-info-group:nth-child(5) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(5) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(6) {
  -webkit-transform: translate(-7.5em, -7.5em);
          transform: translate(-7.5em, -7.5em);
  transition: all 1s ease 0.6s;
}
.domain-cluster:hover .domain-info-group:nth-child(6) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(6) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(7) {
  -webkit-transform: translate(7.5em, -7.5em);
          transform: translate(7.5em, -7.5em);
  transition: all 1s ease 0.7s;
}
.domain-cluster:hover .domain-info-group:nth-child(7) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(7) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(8) {
  -webkit-transform: translate(7.5em, 7.5em);
          transform: translate(7.5em, 7.5em);
  transition: all 1s ease 0.8s;
}
.domain-cluster:hover .domain-info-group:nth-child(8) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(8) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(9) {
  -webkit-transform: translate(-7.5em, 7.5em);
          transform: translate(-7.5em, 7.5em);
  transition: all 1s ease 0.9s;
}
.domain-cluster:hover .domain-info-group:nth-child(9) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.domain-cluster:hover .domain-info-group:nth-child(9) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

<div class="domain-cluster">
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="2"> 
      Pe
    </div>
    <div class="domain-name text-muted">
      Personal
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="3"> 
      Fa
    </div>
    <div class="domain-name text-muted">
      Family
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="4"> 
      Wo
    </div>
    <div class="domain-name text-muted">
      Work
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="5"> 
      Sp
    </div>
    <div class="domain-name text-muted">
      Spiritual
    </div>
  </div>
</div>