Why transition doesn't work for border property?

146
November 26, 2016, at 6:53 PM

I want to remove border property after a wile (1sec in here). Also I want to it remove smoothly. Here is my try:

var elem = $('div').css({'border-top':'6px solid #FC9A24', 
		              'border-left':'1px dashed #FC9A24', 
		              'margin-top':'-6px'}); 
setTimeout(function() { elem.css({"transition":"border-color .5s ease"});}, 1000);
div{ 
    padding: 10px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<div>Text</div>

But as you see, border doesn't remove. How can I fix it?

Note: similar code for background-color works as well.

Answer 1

The transition goes in parallel with the css attributes, you can't just do transition by itself. Here's the way you can get it done.

var elem = $('div').css({'border-top':'12px solid green',
                          'border-left':'12px solid blue'});
$('button').click(function() {
setTimeout(function() 
           { 
              elem.css({'border-top':'0px solid green',
                      'border-left':'0px solid blue','transition':'border-top 5s ease, border-top 2s ease'});
           }, 1000);
     });

http://jsfiddle.net/0bm4wq7h/16/

Answer 2

setTimeout(function(){ 
    var elem = document.querySelector('p'); 
    elem.setAttribute('class','styled'); 
},1000);
p { 
    border: 2px solid #f00; 
    transition: all ease-in-out 1s; 
    -moz-transition: all ease-in-out 1s; 
    -webkit-transition: all ease-in-out 1s; 
} 
.styled { 
    border: 2px solid #000; 
}
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

Maybe something like this?:) Adding class is much easier. Cheers.

Answer 3

That's because border-style is non-animatable. You can only animate border-color and border-width.

setTimeout(function(){ 
  document.querySelector('p').className = 'no-border'; 
}, 1e3);
p { 
  border: 25px solid #f00; 
  transition: border-width linear 1s; 
} 
.no-border { 
  border-width: 0; 
}
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

READ ALSO
Javascript / jQuery Find &amp; Replace

Javascript / jQuery Find & Replace

I would like to find:

322
How to ensure that all elements are loaded on an html page, and then we perform some modifications on elements in CSS?

How to ensure that all elements are loaded on an html page, and then we perform some modifications on elements in CSS?

This would be a generic question asked a number of times beforeThe reason why i am asking this is because i did use the on ready call back in jquery and it did not modify the placeholder of my element "search_input"

188
jQuery Validate Plugin: Set rule on a set of checkboxes if radio button is selected

jQuery Validate Plugin: Set rule on a set of checkboxes if radio button is selected

Question: I have two radio buttons; if a user selects one then a list of 3 checkboxes appearAt least one of those checkboxes must be selected

264
jQuery UI Slider gets locked when both handles are set to max value

jQuery UI Slider gets locked when both handles are set to max value

When I specify both range values of jquery ui slider to max value as shown below, it becomes locked (The handles can't be adjusted anymore)

238