make generic fade animation css class

e05d39d4 · Jacob Thornton · 2ee7c206 · e05d39d4 · e05d39d4 · e05d39d4
Commit e05d39d4 authored Aug 27, 2011 by Jacob Thornton
7 changed files
--- 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,
+.fade {
-.modal,
-.twipsy,
-.popover,
-.alert-message {
  -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,
+.fade.in {
-.modal.show,
-.twipsy.show,
-.popover.show,
-.alert-message.show {
  opacity: 1;
 }
--- 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;}
--- 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')
    }
  }

--- 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.$element.addClass('in')
-        that.$backdrop && that.$backdrop.addClass('show')
+        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()
      }

--- 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'

--- 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>

--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -752,14 +752,10 @@ input[type=submit].btn {
 // Pattern Animations
 // ------------------
-.modal-backdrop,
+.fade {
-.modal,
-.twipsy,
-.popover,
-.alert-message {
  .transition(opacity .15s linear);
  opacity: 0;
-  &.show {
+  &.in {
    opacity: 1;
  }
 }
\ No newline at end of file