Javascript Override CSS style not working on keyframe animation

Question

I have a problem for override CSS style on element that has class.

I'm using keyframe animation CSS class.

Check this fiddle out for live action :

HTML :

<div id="sidebar" class="animation">this is sidebar</div>
<div id="trigger">this is trigger</div>

CSS :

#sidebar {width:225px; height:100%; background:red; position:fixed; top:0; left:0; display:none; }
#trigger {float:right; }
.animation {animation-duration: 0.5s; animation-fill-mode: both; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }

}

.slideInLeft {
  animation-name:slideInLeft;
  display:block !important;
}

JS :

$(document).ready(function() {
    $("#trigger").on("click", function() { // trigger for opening #sidebar
        $("#sidebar").addClass("slideInLeft"); // addClass, so it animated
    });

    $("#sidebar").on("mousemove", function(e) { // move #sidebar according mousemove
        e.preventDefault(); // reset default behavior
        $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
        // add style for move #sidebar, look at this element, not working. what's wrong here?
    });
});

Why #sidebar not moving? the CSS style already add to it. but not moving.

What's wrong with my code?

thanks in advance...

you just need to add this jquery in to your code $(this).removeClass('slideInLeft'); under mousemove function — Iqbal Pasha
– Iqbal Pasha, Commented Mar 18, 2016 at 6:25

Steel.Liao · Accepted Answer · 2016-03-18 06:20:53Z

3

animation-fill-mode: both;

Means that the sidebar will keep the style while animation end! If you remove animation-fill-mode style everything's ok.

more information for animation-fill-mode.

answered Mar 18, 2016 at 6:20

Steel.Liao

1965 bronze badges

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

2 Comments

Ching Ching Over a year ago

so, i just need set it into animation-fill-mode:none; ?

Ching Ching Over a year ago

this method really simple, i like that! thank you so much Steel Liao!

ketan · Accepted Answer · 2016-03-18 06:19:56Z

1

It is because div have slideInLeft class. Remove it on mouse move.

$(this).removeClass('slideInLeft');

Fiddle

$("#sidebar").on("mousemove", function(e) { 
   e.preventDefault(); 
   $(this).removeClass('slideInLeft');
   $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
});

answered Mar 18, 2016 at 6:19

ketan

19.4k42 gold badges68 silver badges107 bronze badges

1 Comment

Ching Ching Over a year ago

wow, this method also working! amazing! thank you so much ketan!

Ekim · Accepted Answer · 2016-03-18 06:22:09Z

1

the animation in the class slideInLeft will prevent your updates from showing.

if you change the css update code to this you'll see results. You still need the display:block so just removing the class would not work.

$(this).removeClass('slideInLeft');
$(this).css({"display":"block","transform": "translate3D(" + e.pageX + "px, 0, 0)"}) // add style for move #sidebar, look at this element, not working. what's wrong here?

changes applied https://jsfiddle.net/e9tzurnf/

answered Mar 18, 2016 at 6:22

Ekim

1,10511 silver badges29 bronze badges

1 Comment

Ching Ching Over a year ago

Wow, fabolous! so, i must display block to it. thanks Ekim

rrk · Accepted Answer · 2016-03-18 06:25:39Z

1

You need to remove the class slideInLeft after the animation is complete.

$("#trigger").on("click", function() { // trigger for opening #sidebar
    $("#sidebar").addClass("slideInLeft block"); // addClass, so it animated
    setTimeout(function(){
            $("#sidebar").removeClass('slideInLeft');
    }, 500);
});

Also add a different class to keep the display:block.

.block{
    display: block !important;
}

DEMO

edited Mar 18, 2016 at 6:25

answered Mar 18, 2016 at 6:19

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Collectives™ on Stack Overflow

Javascript Override CSS style not working on keyframe animation

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related