make generic fade animation css class

diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css
index 8b95d5b1c1f28eb897302b0293c1e141cb7a0f0c..92e141119d5817c9f8342726257641c9078ecad4 100644 (file)
--- 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 4c4673a1735c4a907a3bd99b62be8b8c011da285..36c7b6c1215ac6841aa9b14e1b62f4c105cfb55f 100644 (file)
--- 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 d1983d9f7ffaa55af584da31b6d2c65177061cbb..f6a5f971146154ddbc518b5a801dfe4650174d69 100644 (file)
--- 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 0b13fdf5829b23dd6bdb7b41c13fd19b2b1d6aa3..8e782a37e7160986b0f4f4e36eaa5631d9b08017 100644 (file)
--- 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 4047f910d6bb3dc29f3035cf1c59f0ae9dfa3605..2d17796e13d31b7556699841a48904685dc2f23d 100644 (file)
--- 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 c8d5db647ef1a26804815be0e888ee80ed3e6253..3e9f39e63c1a2f2b2582644e5fb83b0b5b17f825 100644 (file)
--- 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 398fc37a13f44d708a19ca57dcef44e3dcab57b6..a34900d047ea4889243baaf8be08322f1f617d63 100644 (file)
--- 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