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），那么您可以在下面的代码段中执行此操作。另一方面，如果您尝试使用CSS获得动画的正向和反向效果，则无法实现。

这里，使用输入元素和标签（用作按钮）。单击标签后，将input进行检查（基于for属性）。如果选中input，则使用transform选择器将input:checked ~ #transitiondiv应用于元素。这意味着 选择input的兄弟元素，在id='transitiondiv'被选中时<{1}} 。再次单击标签时，input将被取消选中，因此元素将切换回原始状态。

要将input本身移至外部查看区域，系统会使用input属性为position: absolute的{{1}}。

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);
}

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

2 个答案: