Permalink
Browse files

initial plugin

  • Loading branch information...
0 parents commit 2d9e0215db578c749013bdd3219d641ccaa26b34 Jonathan Snook committed Jan 12, 2012
Showing with 94 additions and 0 deletions.
  1. 0 README
  2. +50 −0 example.html
  3. +44 −0 preparetransition.js
No changes.
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="preparetransition.js"></script>
+
+ <style>
+
+ .msg {
+ position: absolute;
+ padding: 5px 10px;
+ border-radius: 10px;
+ background-color: #CCC;
+ -webkit-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ opacity: 1;
+ }
+
+ #msg1 { top:50px; }
+ #msg2 { top:80px; }
+
+ .msg.hidden {
+ display:none;
+ opacity: 0;
+ }
+
+ .is-transitioning {
+ display: block !important;
+ visibility: visible !important;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <button id="btn-test">Toggle message</button>
+ <div id="msg1" class="msg">Here is a message that needs to be displayed 1</div>
+ <div id="msg2" class="msg hidden">Here is a message that needs to be displayed 2</div>
+
+ <script>
+ $('#btn-test').bind('click', function(){
+ $('.msg').prepareTransition().toggleClass('hidden');
+ });
+ </script>
+</body>
+</html>
@@ -0,0 +1,44 @@
+/**
+ * prepareTransition
+ * jQuery Plugin for ensuring transitions with display:none or visibility:hidden
+ * are in the right state until the end of the transition
+ *
+ * Developed by Jonathan Snook (http://snook.ca/)
+ * January 12, 2012
+ *
+ * Requires the following CSS:
+ * .is-transitioning {
+ * display: block !important;
+ * visibility: hidden !important;
+ * }
+ */
+
+(function($){
+
+$.fn.prepareTransition = function(){
+ return this.each(function(){
+ var el = $(this);
+ // remove the transition class upon completion
+ el.one('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(){
+ console.log('here');
+ el.removeClass('is-transitioning');
+ });
+
+ // check the various CSS properties to see if a duration has been set
+ var cl = ["transition-duration", "-moz-transition-duration", "-webkit-transition-duration", "-o-transition-duration"];
+ var duration = 0;
+ $.each(cl, function(idx, itm){
+ duration = parseFloat( el.css( itm ) ) || duration;
+ });
+
+ // if I have a duration then add the class
+ if (duration != 0) {
+ el.addClass('is-transitioning');
+ el[0].offsetWidth; // check offsetWidth to force the style rendering
+ };
+ });
+}
+
+
+}(jQuery));
+

0 comments on commit 2d9e021

Please sign in to comment.