Konvertieren von Javascript-Animation in CSS-Klasse für bootstrap Modal Popup

Question

Ich habe Bootstrap Modal Popup in meinem bestehenden Projekt (die von anderen Entwickler implementiert wurde) Wo Client hat das spezifische Verhalten zum Öffnen modal Popup mit folgenden js-Code erwähnt (wir verwenden keine Standard modale Methoden Bootstrap/schließen-Dialog zu öffnen.)

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

Aus diesem Grunde habe ich viel Problem konfrontiert bin, und ich habe, um alle Sachen zu verwalten manuly wie Overlay, in der Nähe usw.

Was ich bei http://hawkee.com/snippet/16154/ festgestellt, dass für benutze benutzerdefiniertes Verhalten beim Öffnen modaler Popups Ich brauche diesen benutzerdefinierten js Code bu nicht t Das kann ich nur mit reinem CSS erreichen. Wie auf dieser Seite muss ich nur ändern .modal.fade und .modal.fade.in Klassen;

Da ich nicht so viel Experte in der Animation bin, brauche ich eine Anleitung, wie ich diesen geschriebenen Effekt nur in CSS konvertieren kann.

Nach ein paar R & D Ich fand vielleicht kann ich diese verwenden http://easings.net/#easeInOutBack Aber nicht sicher.

ich erreicht habe dies bis jetzt:

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

Answer 1

Kaushik,

änderte ich den Stil basierend auf hawkee Beispiel, das Ihnen geteilt. Hoffe, es wird wie erwartet funktionieren.

.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 
}