纯 CSS 动画播放状态门效果按钮

Question

所以基本上我想用 div 创建一种门效果

单击按钮时打开和关闭。

var buttons = document.querySelectorAll('button');
[].forEach.call(buttons, function(btn) {
  btn.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName.toLowerCase() === 'button') {
      document.getElementById(target.dataset.target + '-div').className = target.textContent === 'stop' ? '' : target.textContent;
    }
      
  });
});

button {
  height: 24px;
  font-size: 16px;
}

div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}

#transition-div {
  transition: transform 1s ease-in-out;
}

#transition-div.start {
  transform: translateX(400px);
}


@keyframes move-right {
  0% { transform: translateX(0px); }
  50% { transform: translateX(400px); }
  100% { transform: translateX(0px); }
}

<section>
  <h1>Transition</h1>
  <button data-target="transition">start</button>
  <button data-target="transition">stop</button>
  <div id="transition-div"></div>
</section>

可以在纯 CSS 中创建顶部结果还是必须在网页中实现 javascript？ 您能否将“开始”和“停止”按钮合并为一个按钮？ 伙计们干杯！

Answer 1

你可以只使用 CSS 来做到这一点

div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}
#transition-div {
  transition: transform 1s ease-in-out;
}
#toggleStartStop { display: none }
#toggleStartStop ~ label[for="toggleStartStop"] {
  padding: 3px 10px;
  background: lightgray;
}

#toggleStartStop:checked ~ #transition-div {
  transform: translateX(400px);
}
#toggleStartStop ~ label[for="toggleStartStop"]:after {
  content: 'Start';
}
#toggleStartStop:checked ~ label[for="toggleStartStop"]:after {
  content: 'Stop';
}

@keyframes move-right {
  0% { transform: translateX(0px); }
  50% { transform: translateX(400px); }
  100% { transform: translateX(0px); }
}

<section>
  <h1>Transition</h1>
  <input id="toggleStartStop" type="checkbox"/>
  <label for="toggleStartStop"></label>
  <div id="transition-div"></div>
</section>

Answer 2

如果您的问题只是关于如何在不使用 JS 的情况下获得完全相同的输出（不一定使用 animation 或 animation-play-state），那么您可以像下面的 sn-p 一样进行操作。另一方面，如果您尝试使用 CSS 为 动画 获得这种正向和反向效果，这是不可能的。

这里使用了一个输入元素和一个标签（用作按钮）。单击标签时，会检查input（基于for 属性）。如果选中了input，则transform 将使用input:checked ~ #transitiondiv 选择器应用于元素。这意味着选择与input 同级的元素，在选中input 时具有id='transitiondiv'。当再次单击标签时，input 将被取消选中，因此元素将切换回原始状态。

要将input 本身移动到查看区域之外，请使用position: absolute，其left 属性值为负。

input {
  position: absolute;
  left: -100px;
}
label {
  display: inline-block;
  padding: 8px;
  border: 1px solid;
  cursor: pointer;
}
div {
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  border: 0 white solid;
  background-color: green;
}
#transition-div {
  transition: transform 1s ease-in-out;
}
input:checked ~ #transition-div {
  transform: translateX(400px);
}

<section>
  <input type="checkbox" id="control" />
  <label for="control">Toggle</label>
  <div id="transition-div"></div>
</section>