Question

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

我正在寻找一种模仿缓和的方法。我该怎么做？

jQuery / css解决方案请。

http://reederapp.com/mac/screens

Answer 1

甜美的效果！

似乎这些是通过JS触发的CSS转换。叠加首先立即缩放到50％的大小，然后动画到105％，然后动画回到100％，两者都有一个缓动设置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);

模仿reeder风格截图弹出缓和

1 个答案: