用点击动画制作箭头

Question

我绝对是新手，这是我的第一个代码：

​

.container_menu {
  position: relative;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}
.container_menu .line-1 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu .line-2 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu:hover .line-1 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.container_menu:hover .line-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="container_menu">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

​

我怎么可能有一个点击动画(可能是JS?)而不是悬停？

我将在一个网站的菜单中使用它。

我想我必须使用JS代码。但我不知道我怎么会意识到。也许你能帮我，非常感谢。

https://codepen.io/defaultdave/pen/baXLPQ代码

Answer 1

https://codepen.io/Tanded/pen/OqVBPE

<div class="container" onclick="fnc(this)">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

function fnc(el){
  el.classList.toggle("clicked");
}

添加一个小js函数来切换类，并在单击类而不是在第53行上悬停-> &.clicked时编辑css到动画行。