{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/17219","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/17219/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/17219/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/17219/events","html_url":"https://github.com/twbs/bootstrap/issues/17219","id":102454615,"number":17219,"title":"Modal animations for v4 - some examples","user":{"login":"durkes","id":8516926,"avatar_url":"https://avatars.githubusercontent.com/u/8516926?v=3","gravatar_id":"","url":"https://api.github.com/users/durkes","html_url":"https://github.com/durkes","followers_url":"https://api.github.com/users/durkes/followers","following_url":"https://api.github.com/users/durkes/following{/other_user}","gists_url":"https://api.github.com/users/durkes/gists{/gist_id}","starred_url":"https://api.github.com/users/durkes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/durkes/subscriptions","organizations_url":"https://api.github.com/users/durkes/orgs","repos_url":"https://api.github.com/users/durkes/repos","events_url":"https://api.github.com/users/durkes/events{/privacy}","received_events_url":"https://api.github.com/users/durkes/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/feature","name":"feature","color":"4bb14b"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/js","name":"js","color":"ffc40d"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/v4","name":"v4","color":"563d7c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-21T20:18:24Z","updated_at":"2015-08-22T01:44:29Z","closed_at":null,"body":"I did not believe a pull request was appropriate yet, but I wanted to provide some SCSS additions and some example HTML for easily adding additional animations for modals.\r\n\r\nCurrently, all animations still require .fade since the JS is looking for fade. I'm proposing this is a starting point to evolve to the final solution.\r\n\r\n_modal.scss\r\n```scss\r\n.modal {\r\n  &.scale {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: scale(0.75);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  &.from-left {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: translateX(-100%);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  &.from-right {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: translateX(100%);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  &.from-bottom {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: translateY(100%);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  &.from-front {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: scale(3);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  &.newspaper {\r\n    .modal-dialog {\r\n      transition-property: all;\r\n      transform: scale(0) rotate(540deg);\r\n    }\r\n\r\n    &.in .modal-dialog {\r\n      transform: scale(1) rotate(0deg);\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nHTML testing\r\n```html\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-fade-scale\">Modal: fade scale</button>\r\n    <div class=\"modal fade scale\" id=\"md-fade-scale\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-from-right\">Modal: from right</button>\r\n    <div class=\"modal fade from-right\" id=\"md-from-right\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-from-left\">Modal: from left</button>\r\n    <div class=\"modal fade from-left\" id=\"md-from-left\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-from-bottom\">Modal: from bottom</button>\r\n    <div class=\"modal fade from-bottom\" id=\"md-from-bottom\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-from-front\">Modal: from front</button>\r\n    <div class=\"modal fade from-front\" id=\"md-from-front\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#md-newspaper\">Modal: newspaper</button>\r\n    <div class=\"modal fade newspaper\" id=\"md-newspaper\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n      <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">&times;</span>\r\n              <span class=\"sr-only\">Close</span>\r\n            </button>\r\n            <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            ...\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\r\n            <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n```"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/133624532","html_url":"https://github.com/twbs/bootstrap/issues/17219#issuecomment-133624532","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/17219","id":133624532,"user":{"login":"durkes","id":8516926,"avatar_url":"https://avatars.githubusercontent.com/u/8516926?v=3","gravatar_id":"","url":"https://api.github.com/users/durkes","html_url":"https://github.com/durkes","followers_url":"https://api.github.com/users/durkes/followers","following_url":"https://api.github.com/users/durkes/following{/other_user}","gists_url":"https://api.github.com/users/durkes/gists{/gist_id}","starred_url":"https://api.github.com/users/durkes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/durkes/subscriptions","organizations_url":"https://api.github.com/users/durkes/orgs","repos_url":"https://api.github.com/users/durkes/repos","events_url":"https://api.github.com/users/durkes/events{/privacy}","received_events_url":"https://api.github.com/users/durkes/received_events","type":"User","site_admin":false},"created_at":"2015-08-22T01:44:29Z","updated_at":"2015-08-22T01:44:29Z","body":"Please share thoughts on the following proposal - if supported, I will create a pull request for the SCSS and JS:\r\n\r\nModal default behavior (class=\"modal\") will include the fade animation (currently class=\"modal fade\"), so fade is automatic. To disable animation/fade on modal, add something like .no-anim\r\n\r\nThe additional modal animations can piggy back off of the default behavior and would be indicated like class=\"modal from-bottom\"\r\n\r\nAdditionally, should we add variables for the transition in and out durations? $modal-transition-in, $modal-transition-out"}}