Question

我正在使用Rails 5应用程序：

Bootstrap（使用jQuery）
SASS
波旁

＆＃13;

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

＆＃13;

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

＆＃13;

我正在执行此操作https://jsfiddle.net/stoicAlchemist/4ptz0wvn/，正如您所看到的，悬停时的转换工作正常，但在悬停关闭时，它只会快速回到原始位置。我一直在寻找一个类似的问题，但似乎无法找到足够接近的问题来解释我的困惑，我甚至尝试了inline-block财产上的display而且＃39}不工作，它必须是愚蠢的，我没有看到它。任何人都知道为什么翻译不能用于过渡？

Answer 1

这取决于你徘徊的东西。如果您将body标记或最外层包装设置为position:absolute;height:100%;width:100%以及body:hover .domain-cluster .domain-info-group:nth-child(n) .domain-circle，则动画保持不变直到鼠标离开浏览器窗口。离开浏览器后，CSS别无选择，只能恢复到原来的状态，因为：悬停状态只是暂时的，如名称所示（您不再悬停）。与：active和：focus相同，一旦鼠标离开浏览器，它们就不知道任何事物的上下文。没有数据绑定到DOM。

你可以通过在你的一个动画上使用某种动画延迟来使用纯CSS来实现这种效果，例如：将其设置为超高值，在鼠标重新进入窗口之前不会过期。但是，抛出一行或两行JS会更加简单，一旦鼠标离开窗口，它就会向元素添加某种.blur类（这反过来可以否定将动画强制恢复到原始状态的继承样式状态）

Answer 2

Hunter Fraizer所说的一切都给了我这里问题的线索。显然，将:hover添加到选择器意味着转换将在其悬停在其上时发生，但是当它不在时，转换不会发生，因此它是必须添加一个转换＆＃34;回到原点＆＃34;，我通过添加转换来做到这一点，所以它不仅仅是＆＃34;眨眼间转换回＃34;。请查看jsfiddle的原始链接以获取更新版本。

＆＃13;

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

＆＃13;

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

＆＃13;

即使使用内嵌块

2 个答案: