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

Question

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

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

编辑:通过设置具有相同属性的边框属性解决了这个问题。设置一个“border: 0px solid red;”在 .boxy 上修复它，但只设置“边框: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

解释

It enables you to define the transition between two states of an element.

---

Source

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

Fiddle