将新添加的内容飞入页面

假设出于任何原因，需要在页面上显示一个新的内容模块。 只需将该新模块追加到 DOM 中，它就会立即显示。 这可能足以作为“入口” - 或者它可能过于细微。 我认为，当您向页面添加新内容时，您希望人们看到它。 动画可能是解决方案。 从技术上讲，它会减慢新内容的进入速度，但视觉效果肯定会使它更显眼。 让我们编写一些代码，使添加到页面的所有新模块“飞入”。

已存在的内容…

您有一个网站。 网站有模块。

<section class="main" id="main">
  <div class="module">
     ...
  </div>
  <div class="module">
     ...
  </div>
</section>

<aside class="sidebar" id="sidebar">
  <div class="module">
    ...
  </div>
  <div class="module">
    ...
  </div>
</aside>

新内容进来

jQuery 样式。

$("<div />", {
  class: "module",
  html: newContent // from an Ajax request or something
}).prependTo("#sidebar");

选项 #1：为新模块添加一个类

如果您有能力，为新添加的内容添加一个类可能是最干净的方法，这样您就可以专门定位它。 在这种情况下，我们给它添加了 newly-added 类。

$("<div />", {
  class: "module newly-added",
  html: newContent // from an Ajax request or something
}).prependTo("#sidebar");

飞入 CSS

这个新类将绑定一个动画，它会执行飞入。 它将在添加到 DOM 后立即运行。

.newly-added {
  animation: flyin 1.2s ease forwards;
  opacity: 0;
  transform: scale(2);
  filter: blur(4px);
}

@keyframes flyin {
   to { 
     filter: blur(0);
     transform: scale(1);
     opacity: 1;
   }
}

注意：这里没有使用任何前缀。 所有 animation、transform、filter 和 @keyframes 都应该添加前缀才能获得最佳浏览器支持。 请参考 CSS3 请 以了解在哪些浏览器上使用哪些前缀。 或者，使用 Sass/Compass 和相应的混合宏。 或者，使用 Prefix Free¹。

选项 #2：在没有类的情况下定位所有新模块

您可能无法控制新添加的内容所具有的类。 在这种情况下，您将定位页面上的所有现有内容，并赋予它们一个类来取消飞入效果。

$(function() {
  $(".module").addClass("old-school");
});

然后，您只能使用 :not 选择器定位新模块。

.module:not(.old-school) {
  /* animation stuff */
}

演示

在 CodePen 上

查看 CodePen 上 Chris Coyier 的笔 飞入新内容 (@chriscoyier) 在 CodePen 上。

---

¹ Prefix Free 现在无法开箱即用地使用 filter，但您可以使其工作。 查看 Lea 在这里提供的代码示例。