模仿reeder風格截圖彈出緩動

Question

reeder lightbox彈出窗口在最後有一個緩動。

我正在尋找一種方法來模擬緩解。我該怎麼做？

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);