页面过渡动画类似于Medium.com

Question

当我点击底部按钮加载下一篇文章时，我试图找出媒体是如何做动画的。

要查看它，请转到Medium article，滚动到底部，然后单击转到下一篇文章。

我知道如何使用AJAX加载另一个页面，但是如何使用类似的动画呢？我搜索了他们的代码，却找不到它。

Answer 1

您可以尝试使用css-animations和javascript的组合来实现相同的效果。作为起点，您可以查看 effeckt.css 这是css动画的集合。不幸的是，它不包含精确的动画，因此我尝试在 fiddle

中重现它

基本思路是使用两种效果scaleDownFromFront和slideFromBottom：

 @keyframes scaleDownFromFront {
   to {
     -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
}


@keyframes slideFromBottom {
  from {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

Answer 2

类似于jquery pop效果

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/

在页面上尝试弹出效果。

它只是缩放和淡入淡出的css过渡组合;