jquery - 模仿reeder风格截图弹窗缓动

Question

reeder 灯箱弹出窗口最后有一个缓动。

我正在寻找一种模仿这种放松的方法。我该怎么做？

请使用 jQuery/css 解决方案。

http://reederapp.com/mac/screens

Answer 1

甜美的效果！

这些似乎是通过 JS 触发的 CSS 转换。覆盖首先立即缩放到 50% 的大小，然后动画到 105%，然后动画回到 100%，两者都使用 easing 设置ease-out。

这会导致所谓的“80/20 效应”：通过最初跳过动画的前 80%（或在本例中为 50%），动画看起来更加活泼和响应迅速。

---

以下是有问题的代码位：（从reederapp.com的源代码复制 - 我没有写这些！）

CSS (http://reederapp.com/mac/css/main.css)

#screen-overlay.animate {
    -webkit-transition: all 0.2s ease-out;  
}

JS (http://reederapp.com/mac/js/mac.js)

$overlay()
  .removeClass('animate')
  .css({opacity:0,'-webkit-transform':'scale(0.5)','background-color':'rgba(0,0,0,0)'})
  .show();

setTimeout(function() {
  $overlay().addClass('animate').css({'-webkit-transform':'scale(1.05)',opacity:1});
  setTimeout(function() {
    $overlay().css({'-webkit-transform':'scale(1)'});
    setTimeout(function() {
      $overlay().css({'background-color':'rgba(0,0,0,0.5)'})
    });
  },200);
},10);