cup_of cup_of - 1 month ago 9
CSS Question

How to make a smooth transition for css controlled by jQuery?

Hello I have a div I want to center controlled by jQuery. I would like to move the div to the center of the page on click. To do this I set up a jQuery function to affect the positioning through css. It works, but its not transitioning smoothly, it happens instantly even if I add the css transitions. Below is my code I have so far

Here is the css:

.footer-active-line {
height: 10px;
width: 33.3333333333%;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}


Here is the jQuery:

jQuery(".footer-locations-box2").click(function(){
jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })
});


This code works, the div gets centered but the transition isnt kicking in. Does anyone know a way to make the transition smooth?

Thanks!

Answer

As I mentioned in my comment, CSS transitions don't work for a destination or start value of auto. It must be in some way numeric. That being said, you're using margin: 0 auto because it automatically adjusts the margins, which creates the illusion of centering. Basically the browser is setting the same margin on both sides to fit the container. The catch is that you already know what that destination margin will be. Your .footer-active-line is set to be 1/3 the width of the container with that width: 33.3333333333%;. You could either use transform (which is relative to the width of the element it's applied to) at 100% or you can set the margin to 33%, which is relative to the offset parent.

Here's method one:

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ transform: 'translateX(100%)' });       
});
.footer-active-line {
    background: red;
  
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-active-line">
</div>

<button class="footer-locations-box2">transition</button>

Here's method two:

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ margin: '0 33.33333%' });       
});
.footer-active-line {
    background: red;
  
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-active-line">
</div>

<button class="footer-locations-box2">transition</button>

Comments