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

您可以使用输入来执行此操作。在这种情况下，最佳实践是使用“复选框”类型，并通过“：checked”子类将其像添加的类一样使用，这里有一个示例在代码中的样子：

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

希望对您有所帮助。

如何使用纯CSS在切换类上设置边框动画？

2 个答案: