`:active`

Question

我编写了这样的代码来在检查时操作不透明性。这行得通。

#check1:checked+.box {
  animation: blink 1s;
}

@keyframes blink {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

取消选中时，我还想执行相同的操作，所以我添加了animation属性。

但是，这将不起作用，并且检查时的动画将不起作用。为什么会这样？

#check1 + .box {
  animation: blink 1s;
}

#check1:checked + .box {
  animation: blink 1s;
}


@keyframes blink {
  0%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

我还定义了一个动画，其处理过程与另一个名称完全相同，并且可以正常工作。为什么会这样？有一个聪明的CSS解决方案吗？

#check1+.box {
  animation: blink1 1s;
}

#check1:checked+.box {
  animation: blink2 1s;
}

@keyframes blink1 {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink2 {
  0%,
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="check1">
<div class="box">
  <div class="content">
    <p>content</p>
    <button type="button">
      <label for="check1">click me</label>
    </button>
  </div>
</div>

Answer 1

仔细阅读，希望它对您有用

   #check1+.box {
      opacity:1;transition: 1s;
    }
    #check1:checked+.box {
      opacity:0;transition: 1s;
    }

    <input type="checkbox" id="check1">
    <div class="box">
      <div class="content">
        <p>content</p>
        <button type="button">
          <label for="check1">click me</label>
        </button>
      </div>
    </div>

Answer 2

“ ...但是为什么将其更改为检查的伪类时却停止工作？”

未选中状态需要有一个明确的选择器，例如：

#check1:not(:checked)

但这不适用于当前布局，因为：

触发器（即<label>）嵌套在目标（即.box）内。看起来很尴尬。在更新的演示中，我必须使用以下方法从流程中删除触发器：
```
 position:absolute; z-index: 1; pointer-events:auto
```
然后是目标（即.box）pointer-events: none
复选框“状态”是持久的，因此，如果选择器相似，则最新版本很可能会覆盖以前的选择器。为了使所有内容都从一个关键帧进行动画处理，我需要一种不会持久且只有一个状态的行为-:active。

`:active`

选中/取消选中该复选框时，动画就会发生。如果您退后一步，则选中/取消选中的外观很像单击，并且动画本身的行为很短暂（例如其名称相同的“闪烁”）。用户单击时会发生:active的状态-特别是mousedown直到mouseup。

HTML

必需

<br id='target'>
...
<a href='#target' class='link'>X</a>

CSS

必需

.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; } 
:target + .box :not(:active) { ... }

演示1

.box {
  pointer-events: none;
}

.X {
  display: inline-block;
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1);
  width: 5ch;
  height: 2.5ex;
  line-height: 2.5ex;
  border: 2px outset grey;
  border-radius: 4px;
  color: #000;
  text-align: center;
  text-decoration: none;
  padding: 1px 3px;
  pointer-events: auto;
}

:target+.box :not(:active) {
  animation: blink 2s linear 0.1s;
}

@keyframes blink {
  0% {
    opacity: 0s;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<br id='target'>
<article class="box">
  <section class="content">
    <p>Content inside .box</p>
    <a href='#target' class='X'>X</a>
  </section>
</article>
<p>Content outside of .box</p>

选中/取消选中时如何使用相同的关键帧？

2 个答案:

`:active`

HTML

CSS

演示1