make generic fade animation css class

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 = $('<div class="modal-backdrop" />')
+        this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
           .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 @@
           </ul>
           <h3>Methods</h3>
           <h4>$().modal</h4>
-          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
+          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>. If you want your modal to fade in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
 <pre class="prettyprint linenums">
 $('#modal-content').modal({
   closeOnEscape: true
@@ -112,7 +112,7 @@ $('#modal-content').modal({
           <h3>Demo</h3>
 
           <!-- sample modal content -->
-          <div id="modal-from-dom" class="modal hide">
+          <div id="modal-from-dom" class="modal hide fade">
             <div class="modal-header">
               <h3>Modal Heading</h3>
               <a href="#" class="close">&times;</a>
@@ -163,13 +163,13 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
           <h3>Methods</h3>
           <h4>$().alert</h4>
-          <p>Wraps all alerts with close functionality.</p>
+          <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
           <h3>Demo</h3>
-          <div class="alert-message show warning">
+          <div class="alert-message warning fade in">
             <a class="close" href="#">&times;</a>
             <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
           </div>
-          <div class="alert-message show block-message error">
+          <div class="alert-message block-message error fade in">
             <a class="close" href="#">&times;</a>
             <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <div class="alert-actions">
@@ -202,6 +202,7 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
           <h3>Options</h3>
           <ul>
+            <li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the tooltip.</li>
             <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
             <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
             <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
@@ -248,6 +249,7 @@ $('#modal-content').modal({
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
           <ul>
+            <li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the popover.</li>
             <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
             <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
             <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
diff --git a/lib/patterns.less b/lib/patterns.less
index 398fc37a1..a34900d04 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -752,14 +752,10 @@ input[type=submit].btn {
 // Pattern Animations
 // ------------------
 
-.modal-backdrop,
-.modal,
-.twipsy,
-.popover,
-.alert-message {
+.fade {
   .transition(opacity .15s linear);
   opacity: 0;
-  &.show {
+  &.in {
     opacity: 1;
   }
 }
\ No newline at end of file