我如何用纯CSS在切换的类上进行边框动画

Question

标题所建议的。当我单击某些内容时，底部的边框将添加到其中。我只希望它会消失（如果可能的话）。我不确定我是否需要使用JS或使用CSS进行此操作。

到目前为止，这就是我尝试的 - 至少与CSS一起使用。

.selector {
  width: auto;
  height: 30%;
  width: auto;
  height: 50%;
  margin-right: 5%;
}
/*TOGGLE CLASS*/
.active {
  border-bottom: 1px #a0a0a0 solid;
  transition: border-bottom 0.5s ease-in-out;
  padding-bottom: 15px;
}

<span class="selector"
            ><a href="javascript:void(0)" onclick="quote(0)"
              ><img
                src="..."
                alt=""/></a
          ></span>

Answer 1

您可以使用CSS中的[transtion][1]属性设置过渡时间（以及其他很酷的东西）。

在您的情况下您可以例如添加类。我们可以将其命名.transition-3s。然后在您的CSS文件中，您可以按以下方式声明此类：

.transition-3s {
    transition: 3s;
}

编辑

请勿将其应用于您的.active类，因为这只会在"停用"切换时才使用过渡。

Answer 2

您可以使用输入来执行此操作。在这种情况下，最好的做法是使用"复选框"类型，并使用"：检查"的子类，您可以像添加的类一样使用它，在这里您有一个示例，说明了它在代码中的外观：

#toggle {
  display: none; //To hide it
}
#toggle:checked ~ span img { //select the element to toggle
  //As you see, when you press the lable, this is triggered
  border-bottom: 1px #a0a0a0 solid;
  transition: border-bottom 0.5s ease-in-out;
  padding-bottom: 15px;
}
.selector {
  width: auto;
  height: 30%;
  width: auto;
  height: 50%;
  margin-right: 5%;
}

<input id="toggle" type="checkbox">
<label for="toggle">This is the text that will toggle the "class"</label>
<span class="selector">
  <img src="..." alt="">
</span>

您可以将跨度用作标签，只需弄乱它即可。为了使其动画，只需使用属性过渡使其平滑：

#toggle:checked ~ span .active {
  border-bottom: 1px #a0a0a0 solid;
  padding-bottom: 15px;
  //not in here
}
.active { //or img
 transition: border-bottom 500ms ease-in-out; //use it here to make it more clear
}

希望它能有所帮助，请有疑问。