From e05d39d4ccaadb750d251a268adbeef681472029 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 27 Aug 2011 18:03:01 -0700 Subject: [PATCH] make generic fade animation css class --- bootstrap-1.1.1.css | 14 +++----------- bootstrap-1.1.1.min.css | 2 +- examples/assets/js/bootstrap-alerts.js | 4 ++-- examples/assets/js/bootstrap-modal.js | 19 +++++++++++-------- examples/assets/js/bootstrap-twipsy.js | 14 ++++++++++---- examples/bootstrap-js.html | 12 +++++++----- lib/patterns.less | 8 ++------ 7 files changed, 36 insertions(+), 37 deletions(-) diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css index 8b95d5b1c..92e141119 100644 --- a/bootstrap-1.1.1.css +++ b/bootstrap-1.1.1.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Aug 27 16:19:56 PDT 2011 + * Date: Sat Aug 27 18:02:38 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1893,11 +1893,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.modal-backdrop, -.modal, -.twipsy, -.popover, -.alert-message { +.fade { -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; @@ -1905,10 +1901,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { transition: opacity 0.15s linear; opacity: 0; } -.modal-backdrop.show, -.modal.show, -.twipsy.show, -.popover.show, -.alert-message.show { +.fade.in { opacity: 1; } diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css index 4c4673a17..36c7b6c12 100644 --- a/bootstrap-1.1.1.min.css +++ b/bootstrap-1.1.1.min.css @@ -246,4 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.modal-backdrop,.modal,.twipsy,.popover,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.popover.show,.alert-message.show{opacity:1;} +.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} diff --git a/examples/assets/js/bootstrap-alerts.js b/examples/assets/js/bootstrap-alerts.js index d1983d9f7..f6a5f9711 100644 --- a/examples/assets/js/bootstrap-alerts.js +++ b/examples/assets/js/bootstrap-alerts.js @@ -51,11 +51,11 @@ that.$element = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade') ? this.$element.bind(transitionEnd, removeElement) : removeElement() - this.$element.removeClass('show') + this.$element.removeClass('in') } } diff --git a/examples/assets/js/bootstrap-modal.js b/examples/assets/js/bootstrap-modal.js index 0b13fdf58..8e782a37e 100644 --- a/examples/assets/js/bootstrap-modal.js +++ b/examples/assets/js/bootstrap-modal.js @@ -55,17 +55,19 @@ var that = this this.isOpen = true + this.$element = $(this.settings.content) + _.escape.call(this) _.backdrop.call(this) - this.$element = $(this.settings.content) + this.$element .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) .appendTo(document.body) .show() setTimeout(function () { - that.$element.addClass('show') - that.$backdrop && that.$backdrop.addClass('show') + that.$element.addClass('in') + that.$backdrop && that.$backdrop.addClass('in') }, 1) return this @@ -79,14 +81,14 @@ _.escape.call(this) _.backdrop.call(this) - this.$element.removeClass('show') + this.$element.removeClass('in') function removeElement () { that.$element.remove() that.$element = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade') ? this.$element.bind(transitionEnd, removeElement) : removeElement() @@ -103,19 +105,20 @@ backdrop: function () { var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' if ( this.isOpen && this.settings.backdrop ) { - this.$backdrop = $('
') + this.$backdrop = $('
') .click(function () { that.close() }) .appendTo(document.body) } else if ( !this.isOpen && this.$backdrop ) { - this.$backdrop.removeClass('show') + this.$backdrop.removeClass('in') function removeElement() { that.$backdrop.remove() that.$backdrop = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade')? this.$backdrop.bind(transitionEnd, removeElement) : removeElement() } diff --git a/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js index 4047f910d..2d17796e1 100644 --- a/examples/assets/js/bootstrap-twipsy.js +++ b/examples/assets/js/bootstrap-twipsy.js @@ -54,6 +54,11 @@ if (this.getTitle() && this.enabled) { $tip = this.tip() this.setContent() + + if (this.options.animate) { + $tip.addClass('fade') + } + $tip .remove() .css({ top: 0, left: 0, display: 'block' }) @@ -86,7 +91,7 @@ $tip .css(tp) .addClass(placement) - .addClass('show') + .addClass('in') } } @@ -100,13 +105,13 @@ var that = this , $tip = this.tip() - $tip.removeClass('show') + $tip.removeClass('in') function removeElement () { $tip.remove() } - $.support.transition ? + $.support.transition && this.$tip.hasClass('fade') ? $tip.bind(transitionEnd, removeElement) : removeElement() } @@ -264,7 +269,8 @@ $.fn.twipsy.Twipsy = Twipsy $.fn.twipsy.defaults = { - delayIn: 0 + animate: true + , delayIn: 0 , delayOut: 0 , fallback: '' , placement: 'above' diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html index c8d5db647..3e9f39e63 100644 --- a/examples/bootstrap-js.html +++ b/examples/bootstrap-js.html @@ -95,7 +95,7 @@

Methods

$().modal

-

Returns an instance of the modal class. Accepts an optional options object.

+

Returns an instance of the modal class. Accepts an optional options object. If you want your modal to fade in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).

 $('#modal-content').modal({
   closeOnEscape: true
@@ -112,7 +112,7 @@ $('#modal-content').modal({
           
Demo

 
           
-