Question

我希望在wile （此处为1秒）之后删除border属性。我也希望它顺利删除。这是我的尝试：

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>

但如您所见，border不会删除。我该如何解决？

注意： background-color的类似代码也适用。

Answer 1

转换与css属性并行，您不能单独进行转换。这是你完成它的方式。

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>

也许是这样的？:) 添加类更容易。欢呼声。

Answer 3

那是因为border-style是不可动画的。您只能为border-color和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>

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

3 个答案: