javascript - 在图像加载时将图像从零放大到完整尺寸

Question

我随机放置气泡的图像，我想通过将图像从零放大到全尺寸来模拟制作气泡的效果。我正在使用 CSS transform:scale(); 但我想在图像加载时触发动画。

Answer 1

您可以在图像加载完成后向图像添加一个类，并在 CSS 中指定适当的 transition 和 transform 规则。

$("img").load(function() {
  $(this).addClass("loaded");
});

img {
  transition: transform 1s;
  transform: scaleX(0) scaleY(0);
}
img.loaded {
  transform: scaleX(1) scaleY(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placekitten.com/600/600/">