rstacruz / jquery.transit Goto Github PK
View Code? Open in Web Editor NEWSuper-smooth CSS3 transformations and transitions for jQuery
Home Page: http://ricostacruz.com/jquery.transit
Super-smooth CSS3 transformations and transitions for jQuery
Home Page: http://ricostacruz.com/jquery.transit
In your docs for 3D ROTATION you mention the following;
You may rotate using rotateX and rotateY. Using perspective is optional, but it should always come before rotateX/Y.
I couldn't find it in your code, but relying on the order of keys in an object will produce bugs as the looping order of keys will usually match creation order but not always. This behavior is explicitly left undefined by the ECMAScript specification. In ECMA-262, section 12.6.4 so its done :
The mechanics of enumerating the properties ... is implementation dependent.
Thanks!
As a result, sometimes queues can stack up, or callbacks are suppressed, or multiple transitions don't work, or other quirks like that.
This can happen if:
$foo.css({ left: 2 }).transition({ left: 2 })
)Furthermore, TransitionEnd is a bubbling event and Transit doesn't account for that.
Hi there,
I love this project and I'd like to add my Penner easing approximations from Ceaser.
They will add 1.3k. Do you want it as part of the main
Keyframe support with loops would be the bees knees.
Hi,
Running this awesome plugin in FF 10+ does still apply a transform: translate(x,y) instead of translate3d(x,y). Do you have any idea when this will be implemented?
Thanks for the great work man, I really love the plugin and use it for a big commercial project right now..
will let you know ;)
Thanks in advance!
Cheers,
Patrick
Android prior vresion 4 can't handle 3d CSS transforms. Related issue: http://code.google.com/p/android/issues/detail?id=12451
Firefox 10 now supports 3D CSS transformations, but jquery.transit skips such transitions in FF10.
I have a div #overlay and i want to fade it in and later out. Now that div is at "display:none" by default so it does not interrupt interaction on the screen.
Now when i use
overlay.css
"display":"block"
.transition
opacity: 1
everything works fine. The element is set to display:block and then fades in smoothly. However, when i want to hide it again, i do the opposite
overlay.transition
opacity: 0
.css
"display":"none"
Now the .css() does not wait for the transition to end but it hides it immediately, which looks really bad as you can imagine.
Any way to fix this?
Hi,
I noticed that if you call a transition on multiple elements using Jquery selector, the callback is called twice.
Exemple :
$('#element1, #element2, #element3, #element4').transition({ y:"+=30px" }, doSomething);
DoSomething() will be called 4 times instead of 1.
Awesome plugin by the way (should be native in jQuery :) ).
Your Fork me button on the site is broken
it doesnt work with jquery ui effect like
$.animate({ left: [100, 'easeOutSine'] })
Sorry: It wasn't explicitly documented so i didn't check. This works:
$('#container').transition({color:"yellow"})
Hi, i also point this issue on the following Pull Request.
Sometimes, i need to stop an animation or undo it via:
this.get('element').style['WebkitTransition'] = null;
Afterwards, transitions won't work anymore if the queue element is used, that's why the queue property must be set up to false.
Now, i would like to get a hint about which is the reason,because transitions stop to work after the WebKitTransition element is reset, is that the intended behavior or i am doing something wrong?
Hi, i would like to discuss this feature.
I am currently using jquery.transit.js for a Mobile UI Kit project, so i am testing it on different ways.
I found some time on the code passing the following cleanUP properties:
properties['-webkit-transform-style']='';
properties['-webkit-transition-property']='';
properties['-webkit-transition-duration']='';
properties['-webkit-transition-timing-function']='';
properties['-webkit-transition-delay']='';
properties['-webkit-transform']='';
That is required if after applying a transition (
What it happens with the current implementation is that the second css changes, triggers the transition ( something i don't want that ), i guess, because the transition properties are still present on the element. I also tried to send duration 0, but i also find out it didn't respond as expected.
I did not get deeper in the code, because i wanted to get the maintainer opinions.
Looking forward hearing new about this issue.
Thanks and regards.
I discovered that using the scale property breaks the whole effects in Safari Mobile
Thanks in advance for the help and the awesome job made with this plugin :)
Is it possible to stop an animation? Right now, when I use $('element').transition(x, y) the animation needs to be completed before I can manipulate the x/y etc..
Hope you have a solution for this.
Thanks in advance!
Cheers, Patrick
Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)
-- This repo has been included in The Github Pirates' Chest.
What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.
You should find out more about this project below:
OR, Download The Chest:
Okay, I admit that this going to sound vague but I've narrowed it down every way I can and I think there is a good chance jquery.transit is the reason for this issue (although I'm not 100% sure). Let my describe the issue:
I have jquery.transit running transform origin and rotate on mouseover of an image - so it can happen multiple times in a row. It always works on the first mouseover but does not work for an infinite amount of times: it stops working eventually - maybe on the second mouseover, maybe on the 20th.
There seems to be almost no pattern as to when it breaks:
I know this is a long shot but I really like jquery.transit and I was wondering if anyone else has seen this problem? I realize its possible this bug has to do with CSS3 transform or rotate, but I've done a lot of searching and I can't find this problem reported on at all in forums, etc.
My code is in development at the link below, maybe it will make the above description more clear:
http://www.markpruce.com/8ozstudios/
Any debugging advice or help on this would be greatly appreciated! Thanks,
Mark
Agent: Firefox 13
Condition: There is a menu and animat(ing/ed) elements.
Bug: 1) If you hover over the menu during the animation, the animation flickers. 2) If you hover after the elements becomes invisible. 3) Elements only show up when you inspect.
Solution: While animating / after animation change any CSS property of the animating element (or parent). Property that cannot be noticed. To be on a safe side: 1) Use CSS2 property. 2) It better to toggle the property, with a setTimeout perhaps.
I would really love to know what is going wrong here.
It would be nice to have the option to avoid the queue and apply the transform immediately. Currently, if I want a responsive animation for my slider widget, I have to use use a css transform, which feels wrong :/ (especially since transition requires a vendor prefix).
var transition = 'all ' + duration + 'ms ' + easing;
slider.css({
transform: 'translate(' + sliderOffset + 'px, 0, 0)',
'transition': transition,
'-webkit-transition': transition,
'-moz-transition': transition,
'-ms-transition': transition,
'-o-transition': transition
});
following the instructions on the website
$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
the easing with bounce is not working.
i googled and found out that values > 1 are "values out of range". also found some example where they use
-*vendorprefix-*transition-timing-function : bounce
to get things working.
any suggestions?
regards
michael
Hi,
I'm having a problem with some older PC's, where I'm moving a large object (6000px x 3000px) from one point to another. One PC is a Dell M1330 with 4GB ram, and a Core2Duo (but integrated graphics) - so is not the worst in the world, but it is jumpy.
My main issue is that I'm specifying the duration as 300ms, but the animate jumps and takes over 1s. I'd be happier if it jumped, but did it within the time period.
Has anyone else encountered this, or solved a similar issue.
Cheers,
Chris
I'm using
card.transition({perspective: '1300px', rotate3d: '0, 1, 0, 90deg', scale:'2'}, 300, 'in').transition({left:'50px', top:'0',width:_width+'px',height:_height+'px', perspective: '1300px', rotate3d: '0, 1, 0, 180deg', scale:'1'}
transition with children property
backface-visibility:hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility work fine on webkit browsers.
When I use the scale transform in webkit browsers it makes all of the fonts on the page flash to a weird state. It looks like it is the font anti-aliasing that is flashing on and off and it only effect text that comes after the target element in the dom.
Tested on Opera 11.52.
IE 8 throws an error that says "Object doesn't support this property or method" line 360.
IE 9 jumps immediately to the end of the transition. Can it be made to fallback on jQuery's animate method ?
I have discovered, that if you set "delay" to 0 in a transit instruction, the transition will not be animated.
Furthermore the next instructions with the same element will be completely ignored.
Here is an example: https://gist.github.com/1729309
If $.fx.off is set to true no transition should happen and styles shoould apply to element instantly. See http://api.jquery.com/jQuery.fx.off/
Here's an example: http://jsfiddle.net/TaNga/2/
The z part should be 1.
the code:
$('#test').transition({
perspective: '400px',
rotateY: '90deg',
width:'0px',
transformOrigin : '0' // or 100%
});
in firefox is ok,but in chrome or safari is error. if delete transformOrigin : '0',it's ok.
when i visit the site i get "Object doesn't support this property or method" on line 9 evey time i hover over one of the demo boxes.
Hopefully this is a simply fix, got kinda excited about this to use with IE8 since css3 isn't working with it well at all.
http://www.webkit.org/blog/386/3d-transforms/
CSS hooks for:
-webkit-transform-origin: x, y, z
-webkit-perspective: px /* maybe not needed? */
-webkit-transform-style: { flat | preserves-3d }
-webkit-backface-visibility: { visible | hidden }
The documentation says:
Use
$('...').transition instead of jQuery's $ ('...').animate. It has the same syntax as animate.
But it really only supports the .animate( properties [, duration] [, easing] [, complete] )
overload. I usually use the jQuery.animate( properties, options )
overload to make my code clearer:
$(this).transition({
backgroundColor: "red"
}, {
duration: 900,
easing: "linear"
});
And if I use your alternate syntax (put the duration and easing within the style properties argument, then your proposed fallback for animations in older browsers does not really work:
if (!$.support.transition)
$.fn.transition = $.fn.animate;
Hi,
If you animate multiple elements in parallel, specifying a callback or not modifies the animation synchronization.
I don't know how to say that exactly.
For example if you are animating 10 elements in parallel and if you specify a callback for only 1 of those 10 elements, they won't run the animation synchronously.
Here is a fiddle that shows this incorrect behavior : http://jsfiddle.net/NJJ6X/2/
Thanks :)
Hi Rico, you're doing a heck of a job with this jQuery lib, it's the best by far for CSS animations.
Since jQuery provides basic fade and slide functions, wouldn't it be nice to fallback to these for simple animations like opacity (fade) and x,y (slide), so that older browser get a little bit of spice too? What do you think?
Also, I'm a great fan of animate.css (daneden.me/animate). It would be great to have a plugin which adds the custom animations provided by that library. Pure CSS3 power :)
Great job so far. KUTGW!
It seems that $(object).css('transform', '') doesn't actually remove the style, like the native jQuery CSS setter does. This makes removing transforms (like rotate) difficult, because you can only set transform to 'rotate(0deg)', but it still leaves the rule embedded in the style property.
Hi,
if I try:
$element.transition( {top: -170}, 200, function() {
alert(1);
});
On FIREFOX, the transition won't happen, and the alert won't be shown.
Can you fix it?
Thanks
$(".box").css({ y: 200, rotateX: 30 }).transit({ y: 0 });
This will fail in Firefox (FF9/Mac) because it tries to use rotateX
, which isn't supported in Firefox yet. The actual result is that translate
will be stuck on translate(0,200px)
.
Android 2 WebKit doesn't support 3D transformation (http://caniuse.com/transforms3d) so the test against it should fail. Right now it passes and transitions are messed up on Android.
Is it possible to flip a div and have a different div (or content) on the back?
Let's say I have a set of element with with random rotation and x,y on mouse in I do
element.transition({
rotate: Math.floor(Math.random()*41) - 20+'deg',
x: Math.floor(Math.random()*91) - 40+'px',
y: Math.floor(Math.random()*91)+'px'
});
and on mouse out I'd like it to go back to whatever it was before mouse in..
I could do it by reading and saving the values before the mousein, but then again, it would be nice if the plugin could do it for me.
Othan than that, thanks, great plugin.
A.
This is a great job. I took a few time to resolve a problem with the queue and I found the solution here.
Everything is perfect but I have a big problem with some moves:
Everything is ok for the move with pics but I have a big aliasing with some circle div. It's a little bit better when the background color hasn't a big contrast with the div (the B&W is really aliased) but I thinf there's something to do to have a better result.
Could you help me?
When using IE 10 and calling this function:
$(this).transition({
scale: 1.05,
backgroundColor: "#8EC3DA",
borderColor: "#686868",
duration: 150
});
I receive this error message:
SCRIPT438: Object doesn't support property or method 'setFromString'
jquery.transit.js, line 598 character 9
Here's a screenshot:
As of writing, you can see the error in action at http://ryansobol.com by mousing over any of the social buttons.
NOTE: Everything works fine in IE 9, Chrome 19, Firefox 13, and Safari 5.1.
PS - I'm in love with this library. Keep up the great work!
It will be rare for 0 transition duration to be supplied but in certain cases a calculated duration may result in 0 and callbacks will not have access to the 'this' element and behave unexpectedly.
$('.box').transition({ x: 0 }, 0, function() {
console.log(this);
$(this).transition({ opacity: 0 });
});
I had todo something a little extra to get this to work but not sure if you want documented so did not fork gh-pages:
var delegate = function() {
$.fn.transition = $.fn.animate
var hooks = [['x', 'left'], ['y', 'top']]
hooks.forEach(function(hook, index) {
$.fx.step[hook[0]] = function(fx){
$.cssHooks[hook[0]].set( fx.elem, fx.now + fx.unit );
}
$.cssHooks[hook[0]] = {
get: function(elem, computed, extra) {
return $.css(elem, hook[1]);
},
set: function(elem, value) {
elem.style[hook[1]] = value;
}
}
})
}
if (!$.support.transition) delegate()
Love this plugin. I tested several js-->CSS3 plugins of this type, and this one seems to be the most robust and stable alongside jQuery's other native functions (eg delay).
However, I do find that it leaves me in a tight squeeze when trying to accomodate IE9 with the animate fallback:
if (!$.support.transition)
$.fn.transition = $.fn.animate;
IE9's animate will fail if the original 'transition' function uses anything other than "linear" or "swing" for the easing parameter. That is, the animation stops as soon as it encounters a transition call with "ease", "in", "out" etc.
For now, I've resorted to writing redundant IE9 scripts utilizing animate that mimic my transition-based scripts. There's probably a simpler workaround like replacing the non-standard easing parameter with linear or swing, but my js skills would be pressed to their limit trying to do so.
Am I missing something, or is this indeed an issue/bug?
This also applies to issue#48.
When using the jQuery 1.8 beta, or Internet Explorer 10, the $(elem).css('transform')
returns 'none' when the element has not been transformed using css. The ||
condition never hits, and setFromString won't work.
It isn't the cleanest fix; but it works nonetheless:
Change:
var t = $(elem).css('transform') || new Transform();
Into:
if($(elem).css('transform')!=='none'){
var t = $(elem).css('transform') || new Transform();
} else {
var t = new Transform();
}
You provide an fallback for older browsers, to use animate instead of transition, so I guess animate() and transition() are interchangeable.
It is not recommended to always animate, because of performance issues, but how about the reversed situation?
Say I have a lot of code with .animate() to animate css properties, can I just change them to .transition()? And if so, shouldn't it be possible to use:
if ($.support.transition)
$.fn.animate = $.fn.transition;
So use css transitions if possible by default
If element has an applied styles (transforms) set in CSS, then cssHooks getter returns null
The plugin only support direct selector? If I use parent() selector ,it will report me a error
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.