Question

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

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

编辑：通过设置具有相同属性的border属性来解决此问题。设置“border：0px solid red;” on .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;一样，您将在transition和0px

之间应用10px

<强>解释

它使您能够定义元素的两个状态之间的转换。

Source

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

<强> Fiddle

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;
}

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

2 个答案: