检查/取消选中时如何使用相同的关键帧？ ：活性

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>

我还想在取消选中时执行相同的操作，因此我添加了动画属性。

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

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

---