CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shafizadeh
Shafizadeh

Reputation: 10340

Why transition doesn't work for border property?

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.

Upvotes: 0

Views: 103

Answers (3)

Oriol
Oriol

Reputation: 288250

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>

Upvotes: 1

user3470625
user3470625

Reputation: 

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.

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8868

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/

Upvotes: 1

Related Questions