: 点击后按钮的活动状态消失答案

【问题标题】：:active state of button fades after clicking: 点击后按钮的活动状态消失
【发布时间】：2018-07-31 15:34:47
【问题描述】：

我有一个按钮，我想正常显示为灰色，并在单击时更改颜色并有边框，效果会逐渐消失。

这几乎是相反的： https://codepen.io/anon/pen/BPJVZB 但是当您按住左键单击时，背景颜色和边框不会淡入，而是立即消失，然后逐渐消失

.btn{
  height: 4rem;
  width: 4rem;
  background: grey;
  outline:none;
  border:none;
  transition: 0s;
}

.btn:active{
   background: green;
   color: white;
   outline: 1px solid white;
   outline-offset: -4px;
   transition: 0.5s;
 }

我可以用背景复制我想要的效果，但边框永远不会消失。有人可以帮忙吗？

** 编辑：我认为我描述得很糟糕（尽管我认为前两个 cmets 已经回答了我的问题 - 我认为我必须为边框颜色设置动画）。我试图让这种效果也随着边框淡出，有点像这样：

https://codepen.io/anon/pen/BPJVZB

.btn{
  height: 4rem;
  width: 4rem;
  background: grey;
  outline:none;
  border:none;
  transition: 0s .2s;
}

.btn:active{
   background: green;
   color: white;
   outline: 1px solid white;
   outline-offset: -4px;
   transition: 0s;
 }

【问题讨论】：

我不相信你可以通过将 outline 或 border 设置为 none 来制作动画 - 你必须为 color 制作动画。使用rgba alpha 通道可以实现淡出效果：border-color: rgba(255,255,255,1); 到 border-color: rgba(255,255,255,0); 或类似的东西。
确实 none 不是数值，因此不能用于动画/过渡。
是的，我认为我的问题是无法为边框设置动画 - 虽然它不是在动画中吗？我已经用笔更新了我的问题，它更清楚地显示了我想要实现的目标，但是你写的东西听起来很正确
@NickW 我还添加了一个我认为可以实现您的目标的答案，但如果我有误解，请对此发表评论，我会看看我的可以！

标签： html css

【解决方案1】：

瞬间消失

如果我理解正确，您可以使用CSS animations。您为动画定义一个开始（带白色边框的绿色等）和一个结束（初始状态），然后在按钮为 :active 时将其应用于按钮。

.btn {
  height: 4rem;
  width: 4rem;
  border: none;
  outline: none;
  background: grey;
}

.btn:active {
  animation-name: btn-flash;
  animation-duration: 0.5s; /* Change to make slower/faster */
}

@keyframes btn-flash {
  from {
    color: white;
    outline: 1px solid white;
    background: green;
    outline-offset: 0;
  }
  
  to {
    color: black;
    outline: 1px solid transparent;
    background: grey;
    outline-offset: -4px;
  }
}

&lt;button class="btn"&gt;press&lt;/button&gt;

【讨论】：

我添加了一支新笔，试图让它更清晰一点，但类似的东西 - 尽管在你的例子中，动画在点击结束时结束。我想要背景和边框过渡/淡入淡出。我认为您的编辑使我走上了正轨，谢谢
很高兴能帮上忙。您可以将 :active 更改为 :focus 但这会阻止您重复单击按钮，除非您首先单击按钮外部以失去焦点状态。

【解决方案2】：

如果没有 javascript，你真的无法做到这一点。

尝试类似的方法（使用 JQuery）

.your-element-to-color

$(document).ready(function(){
    $(".your-element-to-color").click(function(){
        $(".your-element-to-color").css("background-color","#hexwhatever");
    });
});

您可以制作此背景颜色、边框颜色、任何 CSS 值，只要它在此 .css 操作内即可。

然后，在 css 中，为它添加任何你想要的过渡。

.your-element-to-color{
    transition:background-color 0.2s; /* Or however much time */
}

您可以进行任何 CSS 过渡。字体大小、边框、边框颜色、边框半径、变换、背景大小，几乎任何东西。

它的工作方式是将颜色的新 css 值传递给 css 文件。如果我记得的话，JQuery 不支持用动画改变颜色，但是，它将支持改变 CSS 的颜色。然后，使用 CSS3 过渡，你可以让它淡出你想要的快或慢。

阅读一下过渡以及它们的工作原理。祝你好运！

【讨论】：