www.webdeveloper.com
Results 1 to 4 of 4

Thread: Activating Animation with Javascript

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Post Activating Animation with Javascript

    Hello fellow programmers!

    I'm working with designing buttons to a quiz, and I have two questions for you today.

    The first one is, if I have an animation in CSS already, for example the one below, how do I activate the animation on an ID with Javascript?

    The second one is, how do I make sure that the animation is finished before anything else happens? Because I will be changing the buttons' classes right after the buttons are pressed. I want the buttons' animations to finish, and then change the classes. So is there some sort of timer for that?

    Code:
    &-webkit-keyframes exampleAnimation{
        background-color: red;
        transition: 0.5s;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    Do you have an example of the code that "is the animation" such as JavaScript and / or (both) HTML and any scripting that goes with the HTML...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    So there are a couple of things to look at here. I'll go in order of course, starting with starting the animation with javascript. This can be done simply by setting the 'animation' and '-webkit-animation' properties of an element. Of course remember in javascript you don't use the hyphens, so you'll end up with something like this
    Code:
    function _StartAnimation($a) {
      $a.style.animation = "exampleAnimation .5s";
      $a.style.webkitAnimation = "exampleAnimation .5s";
    }
    I'll also note that you don't need the transition in the animation itself as this is set when setting the animation for an element.

    Now for your second qusetion, you can set an event listener to wait for the animation on an element to end and have this call another function, like so
    Code:
    function _StartAnimation($a) {
      $a.addEventListener("animationend", function(){_AnimationEnd($a)}, false);
      $a.addEventListener("webkitAnimationEnd", function(){_AnimationEnd($a)}, false);
      $a.style.animation = "exampleAnimation .5s";
      $a.style.webkitAnimation = "exampleAnimation .5s";
    }
    function _AnimationEnd($a) {
      // Animation is over, you can set the 'className' of $a here
    }
    And so essentially you have your button run the _StartAnimation() function, using 'this' as the parameter. This will pass the button element to the function, which will set the event listeners for the end of the animation, and then run the animation on that element. Once complete, you'd simply add '$a.className = "CLASS_NAME_HERE";' to the _AnimationEnd() function.

  4. #4
    Join Date
    Mar 2014
    Posts
    2
    Thanks for answering! The user is meant to navigate through the buttons with the arrows on the keyboard, and press them using "Enter". For that I have done an event listener as well, like the one below.

    Code:
    document.addEventListener('keydown', function(event){
        ...
        
        if(event.keyCode === 13){
            if(isCorrect()){
                POINTS++;
    	}else if(CURRENT_QUESTION >= QUESTIONS.length)
    	    startOver();
    						
    	if(CURRENT_QUESTION < QUESTIONS.length)
    	    nextQuestion();
        }
        
        ...
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles