0

リーダーライトボックスポップアップの最後にイージングがあります。

私はその緩和を模倣する方法を探しています。どうすればいいのですか？

jQuery/cssソリューションをお願いします。

http://reederapp.com/mac/screens

4

1 に答える 1

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);
于 2011-06-16T08:26:34.250 に答える