Question

我有一个具有多个动画（旋转）图像的大元素，您可以放大和缩小整个div（它会改变其缩放变换）。但是，如果在缩小div时创建图像元素，当我向后缩放时，我可以看到图像非常模糊，就好像图像在创建元素时缩小了尺寸一样。一个可能的解决方法是隐藏＆amp;每次缩放时都会显示图像，但这并不是最好的解决方案。

这是一个展示问题的片段（fiddle）。单击第一个链接可获得模糊图像（有时仅在第二次单击时断开），并在第二个链接上单击以获得良好图像。

＆＃13;

$(".try-1").click(function() {
  $(".image").remove();
  $(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
  setTimeout(() => {
    $(".pos").css("transform", "scale(1.4)");
  }, 500)
});
$(".try-2").click(function() {
  $(".image").remove();
  $(".pos").css("transform", "scale(1.4)").append("<div class=\"image\"></div>");
});

＆＃13;

.clicky {
  color: #00f;
  cursor: pointer;
}
.clicky:hover {
  text-decoration: underline;
}
.div {
  position: relative;
  width: 500px;
  height: 500px;
  background: #000;
}
.pos {
  position: absolute;
  left: 250px;
  top: 250px;
}
@keyframes rotating-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.image {
  position: absolute;
  left: -150px;
  top: -150px;
  width: 300px;
  height: 300px;
  background: url(http://i.imgur.com/grJ6I3k.png);
  background-size: 300px 300px;
  animation: rotating-cw 30s linear infinite;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clicky try-1">Create &amp; zoom in</span> | <span class="clicky try-2">Zoom in &amp; create</span>
<div class="div">
  <div class="pos">
  </div>
</div>

＆＃13;

Answer 1

使用它：

.pos {
    -webkit-perspective: 1000;
    position: absolute;
    left: 250px;
    top: 250px;
}

Answer 2

这可以使用requestAnimationFrame解决，但更简单，更直接的解决方案是告诉浏览器再次初始化图像的容器

$(".try-1").click(function() {
  $(".image").remove();
  $(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
  setTimeout(() => {
    $(".pos").css("transform", "scale(1.4)");
    // Here, after we scale up the element again append 
    // the .image element but first remove it
    $(".image").remove();
    $(".pos").append("<div class=\"image\"></div>");
  }, 500)
});

JsFiddle

CSS缩放+动画模糊了Chrome中的图像

2 个答案: