Question

使用Unveil（https://luis-almeida.github.io/unveil/）一个轻量级的js延迟加载插件。

该网站以回调为例。我现在使用的还不错，但想在不透明度中添加其他动画。

我不是编码员（前端设计师），所以我尝试的基本上只是添加另一条“ this.style”行的破解和斜线尝试。

当前脚本如下：

$("img").unveil(200, function() {
      $(this).on("load", function() {
        this.style.opacity = 1;
      });
    });

我希望有人可以向我展示如何添加另一个调用以将其他CSS效果加载到上述脚本中，同时又保持不透明度。我想在当前使用的不透明度旁边添加以下CSS动画。

img {
  animation: 1s ease-out 0s 1 slideIn;
}
@keyframes slideIn {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}

Answer 1

要添加新的CSS效果，您无需添加新的回调。您可以紧接着添加所有CSS效果。您提供的所有效果都会按顺序逐个运行。

您可以执行以下操作：

$("img").unveil(200, function() {
  $(this).on("load", function() {
    this.style.opacity = 1;
    this.style.animation = "1s ease-out 0s 1 slideIn"
  });
});

需要帮助添加其他回调函数

1 个答案: