將JavaScript動畫轉換爲css類用於引導模式彈出式菜單

我在我現有的項目中引導了模式彈出式窗口（由其他開發人員實現）客戶端提到了使用以下js代碼打開模式彈出窗口的具體行爲（我們沒有使用default自舉模式的方法來打開/關閉對話框。）將JavaScript動畫轉換爲css類用於引導模式彈出式菜單

$(dialog).css('top', '-1000px').show().animate({ top: '-1px' }, { 
      duration: 1100, easing: 'easeInOutBack', complete: function() { 
      // No need of this 
      } 
     });

由於這個我現在面臨很多的問題，我必須管理的所有東西manuly像疊加，接近等

我發現在http://hawkee.com/snippet/16154/什麼，對於使用打開模式彈出的自定義行爲我不需要這個自定義js代碼bu我可以通過純粹的CSS來實現這一點。根據本網站我只需要更改.modal.fade和.modal.fade.in類;

由於我在動畫方面沒有那麼多專業知識，所以我需要一些指導，我如何才能將這種js書寫效果轉換爲CSS。

經過一番R & D我發現可能是我可以用這個http://easings.net/#easeInOutBack但是不確定。

我已經實現了這個至今：

http://codepen.io/kaushikthanki/pen/kXGqjo

來源

2016-07-11 Kaushik Thanki

考希克，

我改變基於您共享hawkee例如風格。希望它能按預期工作。

.modal.fade .modal-dialog { 
    top: -1000px; 
    -webkit-transition: all 1100ms ease-in-out; 
    -moz-transition: all 1100ms ease-in-out; 
    transition: all 1100ms ease-in-out; 
} 

.modal.fade.in .modal-dialog { 
    top: -1px 
}

來源

2016-07-11 12:36:21 trungk18

thx爲您提供幫助。我已經實現了迄今爲止，但仍需要一些改進 http://codepen.io/kaushikthanki/pen/xOXZmK –

看起來太棒了。如果您想嘗試，我也會重新生成Bootstrap模式。 http://codepen.io/trungk18/pen/dXVmEE – trungk18

真的令人印象深刻，現在只有兩件事缺少我的要求。 1，緩動後退效果 2，打開時只需要在模態頂部粘貼即可。我們可以做到嗎？ –

將JavaScript動畫轉換爲css類用於引導模式彈出式菜單

回答

相關問題