Question

我在取消选中输入时反转变换时遇到问题。由于它目前处于过渡状态，因此它不会立即恢复到预先检查状态。我尝试过使用：not（：checked），但似乎无法正常工作。

你可以在这里看到我的意思：

 .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  }

  .toggle:checked ~ .overlay {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 200ms;
  transition-timing-function: ease-in-out;
  }

  .toggle:not(:checked) ~ .overlay {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  }

这是一支你可以看到问题的笔 - http://codepen.io/anon/pen/VarVyP。任何帮助或指导表示赞赏。

修改我应该更清楚的是，没有反转的过渡是覆盖不透明度过渡而不是过渡中的抽屉推动。取消选中输入会使抽屉向后移动，但叠加层会立即恢复到预先检查状态，而不会进行过渡。

Answer 1

基本上，您需要在初始叠加层中定义宽度和高度以及z-index。看起来叠加标签在关闭时大小为0,0，打开时为100％，100％。在关闭时将其称为全尺寸是从外观上看的解决方案（在Chrome上测试）

编辑：此外，在.overlay层上，将指针事件设置为无。这样，它只在单击切换按钮时激活。

.overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out; }

.toggle:checked ~ .overlay {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 200ms;
  transition-timing-function: ease-in-out; }

.toggle:not(:checked) ~ .overlay {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out; }

http://codepen.io/anon/pen/reYQQN

取消选中反向CSS转换

1 个答案: