CSS在类切换上添加删除边框

Question

我最近在基于添加或删除类添加或删除边框时遇到问题。 我已经解决了这个问题，但是我对解决方案不满意。

我做了一个jsfiddle来说明问题。 即使在两个类别上都进行了过渡，边框也会正确过渡，但会突然过渡。

编辑 ：通过设置具有相同属性的border属性可以解决此问题。 设置“边框：0px纯红色；” 在.boxy上对其进行了修复，但仅将其设置为“ border：0px;” 才不是。

这是有效的 jsfiddle代码：

HTML：

<div class="boxy"></div>

CSS：

.boxy {
   width: 100px;
   height: 100px;
   background-color: black;
   border: 0px solid red;
   -webkit-transition: border 300ms linear 0s;
   -moz-transition: border 300ms linear 0s;
   -o-transition: border 300ms linear 0s;
   transition: border 300ms linear 0s;
}

.selected {
  border: 10px solid red;
}

Javascript：

$('.boxy').click(function(event){
    $('.boxy').toggleClass('selected');
})

Answer 1

只需在.boxy上定义正确的边框，并将其宽度设置为0px 。

像这样的border: 0px solid red; ，因此您将在0px和10px之间应用transition

说明

它使您可以定义元素的两种状态之间的过渡。

---

资源

因此，在您的情况下，您必须定义边框的初始状态。 （ border: 0px solid red ）

小提琴

Answer 2

我认为您不需要在两个类上都添加过渡，请尝试以下操作：

.boxy {
    width: 100px;
    height: 100px;
    background-color: black;
    border: 10px solid #fff;
    -webkit-transition: border 300ms linear 0s;
    -moz-transition: border 300ms linear 0s;
    -o-transition: border 300ms linear 0s;
    transition: border 300ms linear 0s;
}

.selected {
  border: 10px solid red;
}

编辑 ：使用新的JSFiddle，您需要这样做：

.boxy{
   border: 0;
}