为什么过渡对边境财产不起作用？

Question

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>