将javascript动画转换为css类，以便引导模式弹出

Question

我的现有项目(由其他开发人员实现)中有引导模式弹出，其中客户端提到了使用以下js代码打开模式弹出的特定行为(我们没有使用默认的引导模式方法来打开/关闭对话框。)

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

因此，我面临许多问题，我必须手动管理所有的东西，如覆盖，关闭等。

我在http://hawkee.com/snippet/16154/上发现，为了使用打开模式弹出的自定义行为，我不需要这个定制js代码，但我只能通过纯css实现这一点。根据这个站点，我只需要更改.modal.fade.in类、类、.modal.fade类、类；

因为我不是那么多的动画专家，我需要一些指导，我可以把这个js书面效果转换为css。

经过一些研发，我发现可能是，我可以使用这个http://easings.net/#easeInOutBack，但不确定。

到目前为止，我已经做到了：

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

Answer 1

考希克

我根据您共享的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
}