reload a javascript after CSS3 Animation is finished

Question

i am working on a CSS3 animation that is controlled by a javascript action, so far the script works BUT only once. I can't seem to get to reload the script so it starts again at its default position:

This is the javascript:

function searchBox() {
    var searchstring = document.getElementById('search').value;
    var target = document.getElementById('SearchResult');

    if (searchstring.length > 0) {
        $("#SearchResult").addClass("animation"); 

        } else {

           if (searchstring.length == 0) {                                  
           $("#SearchResult").addClass("animation_back");
           }
    }
}

So it's connected from a <input> text field to the CSS that simply has an opacity change on a DIV, the problem is that is only work once. When I type the text in the box it changes the opacity of the DIV and when I remove the text it hides (opacity 0.0) the DIV again. But when I type again, nothing happens. Must be something small. Still learning. I tried a "return searchbox()" but that did not work. Thanks in advance for your help.

here is the css:

@keyframes SearchResult {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animation_SearchResult{
  animation-name: SearchResult;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes SearchResult_back {
  from { opacity: 1; }
  to { opacity: 0; }
}
.animation_SearchResult_back{
  animation-name: SearchResult_back;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

and here is the HTML

<input class="searchbox" type="text" id="search" onkeyup="searchBox()">
<div class="searchresultcontainer" id="SearchResult"></div>

the search result container at this point just hold a red background so

#SearchResult{
  background-color: red;
}

Changing the function to this actually worked (thank you GMchris):

function searchBox() {
    var searchstring = document.getElementById('search').value;
    var target = document.getElementById('SearchResult');

    if (searchstring.length > 0) {
        $("#SearchResult").removeClass("animation_back").addClass("animation"); 

        } else {

           if (searchstring.length == 0) {                                  
           $("#SearchResult").removeClass("animation").addClass("animation_back");
           }
    }
}

it's also helpful to add your html for the element and the code used to bind the event to it. — Seth
– Seth, Commented Apr 21, 2016 at 12:35

GMchris · Accepted Answer · 2016-04-21 12:25:16Z

3

You need to write.

$("#SearchResult").removeClass('animation').addClass("animation");

CSS animations are executed as soon as an element with a fitting selector is present. This means that when the animation class is added, it will trigger the animation and play it till its end, however since addClass only adds the class, and calling it again will not really do something if the class is already present, you'll need to remove the class and then add it again.

answered Apr 21, 2016 at 12:25

GMchris

5,7064 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ewald Bos Over a year ago

Yes sounds logical indeed so I added the removeClass but it did not work still the same result, it shows once and after no more.

Ewald Bos Over a year ago

actually you where right but i had to add the removeClass 2 times; once when i call the one to show the DIV and once when i close the DIV.

Seth · Accepted Answer · 2016-04-21 12:45:27Z

3

Something like this should work if you want to reload a function after a CSS animation has finished. You alsp have to declare the event when you load the page.

$( document ).ready(function(){
     var element =  $("#SearchResult");
     $element.on('transitionend webkitTransitionEnd oTransitionEnd', function ()      {
        searchBox();
    });
});

edited Apr 21, 2016 at 12:45

Seth

10.5k10 gold badges50 silver badges69 bronze badges

answered Apr 21, 2016 at 12:27

QoP

28.5k16 gold badges78 silver badges77 bronze badges

1 Comment

Ewald Bos Over a year ago

sorry i don't really understand where to place this or how to use this in the page. I am still leaning

Collectives™ on Stack Overflow

reload a javascript after CSS3 Animation is finished

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related