Using Javascript to activate CSS3 animations

Question

I was playing around with some CSS animations and I'm trying to trigger the animations using a Javascript onclick. Noting seems to be working for me.

http://codepen.io/Quinn1011/pen/Eltpk

Could someone please take a look and help me out. I can't even get "next" div to hide on pageload.

That's ridiculous amounts of code in the pen. Make a simple example (the least amount necessary to manifest your problem) and post the code here as well as on a test site. — millimoose
– millimoose, Commented Feb 19, 2013 at 23:32
Little more info. I opened your demo and it animated something. What is the problem? — ThinkingStiff
– ThinkingStiff, Commented Feb 19, 2013 at 23:33
I think you need to add the css classes "animated"etc. ... via $('selector').addClass('animated') ... and i don´t understand your code, for example -> why do you want to show the ('#next') when it´s already visible ?= just don´t get it, but don´t worry you will get this to work, easy — john Smith
– john Smith, Commented Feb 19, 2013 at 23:40
@thinkingStiff I dont want the animations to begin onload, I want them to be activated by a button click. The second div should be hidden when the page is loaded. When the button is clicked, the first div should hide and the second div should show. — QTaylor
– QTaylor, Commented Feb 19, 2013 at 23:43
@JohnSmith That's the problem. I'm trying to get the ('#next') div to hide when the page loads and then reappear in place of the ('#wrapper') div when the link is clicked. Understand ? — QTaylor
– QTaylor, Commented Feb 19, 2013 at 23:45

john Smith · Accepted Answer · 2013-02-19 23:59:35Z

1

add the following line to the css of #next :

display:none

wow, that was easy, now the next show´s up on click and not on load.

.show() is nothing else than removing the css property display:none. just like .hide() is adding display:none to the element

if you understood that, it will be easy for you to understand that your animations are running on load because the css has already been set

so on click add the suiting classes to your elements

http://api.jquery.com/addClass/

ah sorry, that would be the jquery-solution, if you´re not using jQuery and you didn´t mention it, heres the pure way :

function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);

element.setAttribute("class", newClass); 
}

you can call this function like:

$('#button').click(function(){
  changeClass('next','anmimate');
 });

edited Feb 19, 2013 at 23:59

answered Feb 19, 2013 at 23:46

john Smith

18k12 gold badges80 silver badges124 bronze badges

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

4 Comments

QTaylor Over a year ago

Oh wow, thanks. Using display:none never even occurred to me :/ lol. Now I just need to get the animation to stop running as soon as the page loads.

john Smith Over a year ago

the animation is not running before the document is loading anyway..^^ so simply dont add the css-classes and id´s before it loads e.g in you texteditor, but add them via js

QTaylor Over a year ago

I'm still playing around with it. I'm a designer and Javascript is and has always has been a pain to me but I'm trying my best to face it now. Check out the pen. If you don't mind, you could edit the pen and let me see your suggestions in a more hands on environment. I would appreciate it ALOT. Just float the link across here when you're done.

john Smith Over a year ago

I faced the same situation, and realized that you can´t make an awesome user-experience without js ...you just need to start learning..it´s not that difficult. So i made a codepen for you and I included Jquery-library, you should use this library as it makes js more simple... codepen.io/SmeissnA/pen/nkBje i added a back-button for your understanding

Collectives™ on Stack Overflow

Using Javascript to activate CSS3 animations

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related