html - DIV CSS Scale 过渡模糊和不稳定

Question

无论我尝试什么，我都无法获得我正在扩展的 DIV 的漂亮过渡。

https://jsfiddle.net/ugoqrap6/7/

transform: translate3d(0,0,0);
backface-visibility: hidden;

我一直在尝试很多不同的建议，但似乎没有一个能有所作为。

Answer 1

这是一个 jquery 选项，它会短暂淡出，这样您就可以避免拉伸(stretch)动画。

$('.thumb').mouseenter(function() {
  $(this).fadeTo(200, 0, function() {
    $(this).css("transform", "scale(1.2)");
    $(this).fadeTo(500, 1);
  });
})

$('.thumb').mouseleave(function() {
  $(this).fadeTo(200, 0, function() {
    $(this).css("transform", "scale(1)");
    $(this).fadeTo(500, 1);
  });
})

ul {
  padding: 0;
  margin: 50px 20px;
  list-style: none;
}
ul li {
  margin: 5px;
  display: inline-block;
}
ul li a {
  padding: 5px;
  display: inline-block;
}
ul li a img {
  width: 125px;
  height: 125px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
</ul>