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

CSS add remove border on class toggle

本文关键字：添加 删除 边框 CSS      更新时间：2023-09-26

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

我做了一个小提琴来说明这个问题。即使在两个类上都有转换，边界也会正确地转换进来，但会突然转换出去。

EDIT：通过设置具有相同属性的边界属性来修复此问题。在.boxy上设置"border:0px solid red；"可以修复它，但仅设置"bordr: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');
})

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

与此border: 0px solid red;类似，因此您将在0px和10px 之间应用transition

解释

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

源

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

Fiddle

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

.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;
}
相关文章：