javascript - 在悬停 css 上动画 div - 可能的循环

Question

使用 Bootstrap 框架的 Wordpress 站点

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.linkage:hover + .test {
  opacity: 1;
}

<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');">
  
     <a href="<?php the_permalink(); ?>" class="linkage">Link</a>
    
     <div class="test"> Test </div>
  
  </div>
</div>

现在，当链接“链接”悬停时(链接是容器的 100% 高度和宽度)，我的站点会垂直/水平居中显示 div“测试”(不透明度 1)。

我想在悬停时淡入时为“测试”div 设置动画。我在考虑使用比例(在悬停时 div 缩小到其原始大小然后在淡出时放大)或其他东西。除非有人有更酷的想法

Answer 1

您似乎在寻找类似于以下代码段的内容(过渡而非动画)。在链接的 hover 上，.test 沿 X 轴和 Y 轴放大到原来大小的两倍，鼠标移开时，它会恢复到正常大小.

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;  /* added as I think this was missed in your code */
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  background: url(http://lorempixel.com/500/500);  /* added for image */
  opacity: 0;
  transition: all 0.5s ease;  /* modified to transition all property changes */

  /* added to scale up the div with the center as the origin */
  transform-origin: 50% 50%;
  transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
  opacity: 1;
  transform: translateY(-50%) scaleX(1) scaleY(1);  /* bring back to normal state */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');"> 
    <a href="#" class="linkage">Link</a>
    <div class="test">Test</div>
  </div>
</div>

或者，您也可以使用矩阵变换。 translateY(-50%) scaleX(2) scaleY(2) 的等效项是 matrix(2, 0, 0, 2, 0, -101) 和translateY(-50%) scaleX(1) scaleY(1) 将是 matrix(1, 0, 0, 1, 0, -101)。