Develop Reference

For JavaScript or jQuery, how to make transitionend event not fire?

In the link:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
it is said that:
Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.
So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox.
example: (click on either the left or right box in jsfiddle)
$(".foo").click(function(evt) {
$(".foo").addClass("hide");
setTimeout(function() {
$(".foo").eq(0).removeClass("hide");
}, 3000);
});
$(".foo").on("transitionend", function(evt) {
console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});
this is with a CSS transition duration for 6 seconds:
transition-duration: 6s;
But both kept the animation. The left box actually "animate to a new value in the middle of the original animation", so it took 9 seconds for the left to finish, while the right box took 6 seconds to finish.
In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds.
The question is: how do I make the transitionend stop as described in the docs in mozilla.org? (and not by any other brute force method).
(in other words, I want to find out all the situations that the transitionend will not fire and test it out).
Update: I was able to abort the animation if I add display: none to the box on the left, as on http://jsfiddle.net/HA8s2/34/ and won't be able to abort it if it is visibility: hidden as in http://jsfiddle.net/HA8s2/35/ but these do not really "change" the property's value as the docs says -- it is to add or change another property value.

Couldn't you give it a new class that overrides the transition property, removing it?
Your current code is like:
.myelem { transition: 0.5s all; }
You would add this code:
.alsothis { transition: none; }
When you apply the alsothis class to your element, the new transition property value will override the other one, removing the animation effect.

Javascript/jQuery adding an animation to replaceChild

I'm fairly new to Javascript, so let me know if I'm doing something a little silly, but here's the gist:
I'm working with integrating a new feature into a very rigidly constructed template (I basically only get a single plaintext link). My workaround for this was to just add some jQuery that would add an onclick method that would replace the link with the element that I actually wanted to have.
$(document).ready(function(){
$("li a:contains('Search')").bind("click", replaceWithSearch);
});
function replaceWithSearch(){
var searchWrapper = constructSearchBox("");
this.parentNode.replaceChild(searchWrapper, this);
}
That all works, but I've been talking with UI people over here and they want animations for this replacement. Of course their goto is to use CSS animations, but I'm not really sure how to add a smooth fade or slide animation to the replaceChild operation. Am I thinking about this the right way? If so how exactly would I add that animation?

Using CSS animations, you'd do something like the following:
.your-selector {
animation: fadeIn 400ms ease-in-out;
}
#keyframes fadeIn {
from { opacity: 0; }
}
Here's a fiddle showing this: http://jsfiddle.net/zt3QB/. That will make it start from 0 opacity when it is injected into the DOM, and go to the default, which is 1.
If you want to use jQuery:
function replaceWithSearch(){
var searchWrapper = constructSearchBox("").css('opacity', 0);
this.parentNode.replaceChild(searchWrapper, this);
// Using setTimeout because sometimes the DOM is too fast...
setTimeout(function() {
searchWrapper.fadeTo(400, 1);
}, 0);
}
I haven't tested the jQuery one, but I've done similar things. Just finished a project using the CSS version.

Generate Random Webkit Animation with Javascript

I was wondering if it is possible to generate a webkit animation with javascript. Basically all I need is that if i click element A, element B should be animated with a random parameter every time(this is why I cant use a pre-fixed CSS). I'm testing if I can actually generate all this through javascript and Ive gotten pretty far. My code does not do anything random yet but it is really easy to make it random once I get it to work right with javasript. So right now I just want to animate element B every time I click element A. My code looks like this:
$("#elementA").live('touchstart mousedown',function() {
$("head style").remove();
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('#-webkit-keyframes random_spin {'+
'from { -webkit-transform: rotate(0deg); }'+
'to { -webkit-transform: rotate(1440deg); }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});
$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});
There I just added the animation to the header and I applied it to elementB.
My "random_spin" class is a CSS I already predefined :
.random_spin {
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
}
My intention with this is that I should be able to make my elementB spin every time I click on elementA. Unfortunately it only does it once and no matter how much I click on it or how many times I reset the animation name it still only does it once. What am I doing wrong?

To restart a CSS3 animation you cannot just remove and add a class without putting a small delay between the commands. This allows the browsers time to actually remove the class before adding the new one. You can do this with a simple setTimeout
setTimeout(function(){
$("#elementB").addClass("random_spin");
}, 100);
More information and examples can be found below.
http://css-tricks.com/restart-css-animation/

How do you animate a twitter-bootstrap progress bar smoothly?

I have multi-player game with a 30 second timer at the bottom of the screen.
If none of the players make a move for 30 seconds, the form submits.
var ProgressValue = 0;
function showProgress() {
ProgressValue += 100/30;
if (ProgressValue > 100) {
$('form').submit();
}
// Ajax is done here to see if anyone has made a move.
$('.progress .bar').css('width',ProgressValue + '%');
setTimeout(showProgress, 1000);
}
setTimeout(showProgress, 1000);
Each second, I check the Application scope to see if anyone has changed the value of
Application.LastMove
I want the progress bar to animate smoothly, but I don't want to do it by reducing the timeout value. I think that checking to see if anyone has taken a move every second is enough load on the server already.
I've heard of WebSockets, but my current server is on ColdFusion 8, so (I think) I'm satisfied with doing an ajax call every second, unless you feel that ajax is not as elegant and from a less civilized age.
Q: How do you animate a twitter-bootstrap progress bar smoothly from 3.3% to 6.6%?

Don't animate using jQuery, prefer CSS animation, unless you have to support old browsers.
I've made this copying from Bootstrap style:
.bar {
-webkit-transition: width 30.0s ease !important;
-moz-transition: width 30.0s ease !important;
-o-transition: width 30.0s ease !important;
transition: width 30.0s ease !important;
}
For so long transition, I suggest you to try different animations: http://www.the-art-of-web.com/css/timing-function/
In my example I've added two things that could be usefull:
Button text changes when the animation starts and when it ends (just to check animation timings)
Check if the browser support this animation: you can use your jQuery code as fallback mode
For more information about how to detect CSS animation support: https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support
Example: http://jsfiddle.net/CUbgr/5/

Animating a div disappearance, how to smooth that?

I've been trying to animate a Dashboard Widget's div disappearance, but it just brutally goes "poof" (as in, disappears as expected, only instantly).
function removeElement(elementId)
{
duration = 9000; // The length of the animation
interval = 13; // How often the animation should change
start = 1.0; // The starting value
finish = 0.0; // The finishing value
handler = function(animation, current, start, finish) {
// Called every interval; provides a current value between start and finish
document.getElementById(elementId).style.opacity = current;
};
new AppleAnimator(duration, interval, start, finish, handler).start();
interval = 1;
start= "visible";
finish = "hidden";
duration = 9001;
handler = function(animation, current, start, finish) {
document.getElementById(elementId).style.visibility="hidden";
};
new AppleAnimator(duration, interval, start, finish, handler).start();
}
I expected this to "disappear" the div a millisecond after its opacity reaches zero, but for a not so obvious reason (to me), it just disappears immediately. If I comment out the second animation code, the div fades out (but it's still active, which I don't want).
All solutions I've yet seen rely on using JQuery and wait for the event at the end of the animation, is there another way to do that, other than JQuery?

If you are looking for a pure javascript solution it probably needs a good understanding of how javascript event work and basically about javascript language. As reference you should check this question on CodeReview
But as I think the best solution for you and not to rely on jQuery is to checkout CSS3 animations. Even if they are not supported by all browsers you could use Modernizer to fill polyfills for animations.
My favorite CSS3 Animation library is Animate.css. It's pretty neat and gives you a variety of demos in the page.
You'll first have to choose an animation and add it to your css stylesheets. Then have another custom class that contain everything about the animation.
.disappear{
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
}
Then you could use javascript events to toggle in classes to your Elements. Below is how you add a class to an element.
var animationObject = document.getElementById("poof");
animationObject.className = animationObject.className + " disappear";
If you need more help regarding javascript of how this should be done check out this answer.
Hope this helps...

I found it: AppleAnimator possesses animator.oncomplete: A handler called when the timer is complete.
In my case:
var anim = new AppleAnimator(duration, interval, start, finish, handler);
anim.oncomplete= function(){
document.getElementById(elementId).style.visibility="hidden";
};
anim.start();
The Apple documentation actually calls "Callback" the animation code itself, and "handler" the callback, which makes it a bit hard to realize at first.
Thanks frenchie though, the "YourCallbackFunction" made me realize I was missing something related to callbacks :D