transitionend event doesn't fire when my animation finishes - javascript

I'm trying to use jQuery to fire an event when a css animation finishes and it's largely working, but for some reason the transitionend event doesn't get called until I move my mouse off of the object in question.
Here's the method:
function replaceWithSearch(){
var searchWrapper = constructSearchBox("");
$(this).addClass("animated fadeOut"); // css animation
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function (e){
console.log(e);
$(this).parent().replaceWith(searchWrapper);
if (document.URL.indexOf("search?s=") == -1){
document.getElementById("searchbox").focus();
}
});
}
It mostly seems to work with the exception that after the first css animation finishes, if I keep my mouse on the $(this) element the transitionend event won't fire. As soon as I move my mouse off of the element everything works perfectly.
I'm really at a loss with this one, any ideas? I'm using the css classes in animate.css.

You're not getting a transitionend event because you're not using CSS transitions; you're using CSS animations. The CSS of the animated and fadeOut classes in animate.css is as follows:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#-moz-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#-o-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
That's not a CSS transition, it's a CSS animation. They trigger different events on completion.
Replace this:
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
with this:
$(this).on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
and I think everything should work fine.
The fact that something was happening when you moused off the $(this) element is, I suspect, a coincidence; perhaps you have an entirely separate handler, like a mouseout handler, with similar behavior that you're mistaking for the transitionend handler, or perhaps you have some CSS transitions being applied on hover and one of those is triggering a transitionend event completely unrelated to the fadeOut?

Related

I want to do an animation, but just one time, not to be on a loop [duplicate]

I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.

How can I fix CSS transitions on react?

I am building a simple login/signup screen. I'm toggling the login/signup forms through a state variable. The toggle works fine, but everything happens in just one frame and I want to animate the height transition of the form container, as well as fade the forms in or out as they switch. I am struggling to understand/tame the transition property and so far I managed to transition the height, but it only works once, and of course, I haven't been able to animate the forms opacity. Can anyone help me figure out what I'm missing? code sandbox link: https://codesandbox.io/s/wizardly-flower-e42dj
Better you paste your code here, but anyways
you can use CSS keyframes for fade-in effect.
.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
When you are adding class to show login form and signup form, add this "fade-in" class too. Similarly, you can write the same for fading out.
https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js
Updated your code for your reference.

Opacity from 0 to 1 animation not working on Firefox

As the title says, this animation is not working on Firefox.
I am running this animation through JavaScript after a few seconds by using:
document.getElementById('my_id').style.webkitAnimationPlayState = "running";
I also tried:
style.animationPlayState
In the same file, changing the background-color animation works perfectly.
My conclusion is, there is something wrong with opacity on Firefox?
#my_id {
opacity: 0;
animation: animation 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
-webkit-animation: animation 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation: animation 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
}
#keyframes animation {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
The above CSS is from the element I want to animate.
Instead of using JavaScript to add -webkit-animation-play-state, just add a class to your #my_id div using onload that includes all of the browser prefixes.
JavaScript
window.onload = function() {
document.getElementById("my_id").className += "running";
}
CSS
#my_id.running {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
The above code adds the .running class to your #my_id element, which declares animation-play-state: running, including the browser prefixes. You can test the above code by checking out my example that uses your code. I've tested it and it works in Firefox (51), Chrome, Opera, & Safari.

CSS Transition and animation disappear after the starting animation finished

Hi,
I have a problem on CSS animation and transition.
$(document).ready(function(){
$(".d1").click(function(e){
$(".d2").css("animation-direction", "reverse");
$(".d3").css("animation-direction", "reverse");
});
$(".d2").click(function(e){
$(".d1").css("animation-name", "none").css("opacity", 0);
$(".d3").css("animation-name", "none").css("opacity", 0);
});
$(".d3").click(function(e){
$(".d1").css("animation-name", "none").fadeOut("slow");
$(".d2").css("animation-name", "none").fadeOut("slow");
});
});
#keyframes inseq {
100% { opacity: 1; }
}
.d1, .d2, .d3 {
opacity: 0;
transition: all 2s;
animation: inseq 3s ease 1s forwards;
}
.d2 {
animation-delay: 1.3s
}
.d3 {
animation-delay: 1.6s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
https://jsfiddle.net/v7mepwmg/2/
I have a starting-fade-in animation on a series of elements, and then using jquery click event to trigger fadeout; I have tried 3 methods (in example they are .d1 .d2 and .d3 click event) to achieve so, but none of them can do so while the animation finished.....
P.S. If the animation has not finished yet, they work well...
Do I miss anything ?? Thanks!
Updated this a little.
It has something to do with the opacity=0 set on the div elements and the use of animation-direction:reverse. Tough to explain. Basically it jumps to the initial key-frame without any animation. So I've created another set of keyframes for out animation instead of using animation-direction:reverse.
#keyframes in {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes out {
from {opacity: 1;}
to {opacity: 0;}
}
.d1,.d2,.d3 {
opacity: 0;
animation: in 3s ease 1s forwards 1;
}
.d2 {animation-delay: 1.3s}
.d3 {animation-delay: 1.6s}
And then used this to add the second animation and change the initial opacity.
$(document).ready(function() {
$('div').click(function(e) {
var selected = $(this).attr('class');
$('div').not("." + selected).css({
'opacity': '1',
'animation' : 'out 3s ease forwards 1'
}).delay('3000').fadeOut('0');
});
});
Here's the updated Fiddle.
https://jsfiddle.net/thelessergeek/0pwan8qm/

Controling CSS3 keyframe animation with JavaScript

I have a simple keyframe animation:
animation: blink-truck-lights .4s 8s 10s steps(2) 2 forwards ;
#keyframes blink-truck-lights{
from{background-position: 0px 0;}
to{background-position: 0px -250px;}
}
Here is the JS part:
setInterval(function(){
$('#truck').addClass('blink-truck-lights');
},500);
setInterval(function(){
$('#truck').removeClass('blink-truck-lights');
},800);
Now, I would need it to play over a specified time interval, about 8 seconds. How to accomplish this, maybe with adding and removing class with the animation syntax was what came to my mind. But I tried setInterval, and it added the class, but when I created another interval for removing the class, the animation just wouldn't start.
You can do it by pure css also..
#id {
-webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}
LINK
UPDATE 2:-------------------------------------------------------------------------
Javascript answer
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
setInterval(function(){
blink();
},8000)
IN CSS--->
#keyframes 'blink' {
//your code for animation
}
//try moz for mozilla,o for opera and webkit for safari and chrome
.blink_css {
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
}
.animated {
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-ms-animation-duration:8s;
-o-animation-duration:8s;
animation-duration:8s;
}
UPDATE 3:-------------------------------------------------------------------------
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Just add and remove this class whenever you need.Hope this helps.Cheers!!!
This is one way of doing this, other that animationEnd or animationStart events.
Just toggle the class on the desired element, and set the intreval at which you want the animation to start over again.
setInterval(function(){$('#truck').toggleClass('blink-truck-lights')},10000);
Now, the truck lights will blink every 10 seconds.

Categories