CODEWITHSUNDEEP
javascriptjquerycssanimation
MrJalapeno
MrJalapeno

Reputation: 1662

have jquery add(or trigger?) an animation

So I have a graph that is filled out through a nice animation. This happens because every bar in the graph has the css attribute

animation: slide-left 0.9s ease-in-out 1s both;

The animation looks like this:

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(-200%);
  }

  70% {
    -webkit-transform: translateX(2%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

Now, I'm not very good at javascript but I'd like this to happen on the click of a button (and have the graph hidden until the button is clicked) instead of when the page loads.

Now I've removed the animation-attribute from the css-selector and added translateX(-200%);

Realized that if I add animation: slide-left 0.9s ease-in-out 1s both; through inspect element, exactly what I want happens.

So I found a "solution" that looks like this:

$("#button").on('click', show_function);

function show_function() {
    $(".graph").fadeIn("slow");
    $('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}

This feels "clunky" and it takes almost a second to load. So I was wondering what a better way to have a function trigger the animation in javascript/JQuery would be?

Upvotes: 1

Views: 35

Answers (1)

kball
kball

Reputation: 1079

Your best answer is likely to be have the animation sequence in a class, and use jQuery to add the class. E.g. CSS

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(-200%);
  }

  70% {
    -webkit-transform: translateX(2%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}
.slide-it {
  animation: slide-left 0.9s ease-in-out 1s both;
}

And then JS

$("#button").on('click', show_function);

function show_function() {
    $(".graph").fadeIn("slow");
    $('.bar-container').addClass('slide-it');
}

Upvotes: 3

Related Questions