Question

我正在使用以下动画（使用Ember JS重新实现），但未能理解此CSS的工作原理。请参阅以下链接。

https://codepen.io/designcouch/pen/Atyop

#nav-icon3 span:nth-child(1) {
  top: 0px;
}


#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

单击div时会触发

toggleClass（＆＃39; open＆＃39;），但实际上open是什么？它是nav-icon的子类吗？如果有可能使用ember，只需在两个CSS块之间切换（打开而不是）显示动画？

Answer 1

toggleClass('open')添加/删除div的“open”类。当'open'添加到div时，div内的每个span元素都会以不同的方式通过伪nth-child()选择器进行更改。 #nav-icon3的完整CSS位于：

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

在下面的代码中图标内的所有span元素上设置转换。您需要transition: .25s ease-in-out;才能在所有子span元素上生成动画。

  #nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

Answer 2

如Jquery Docs所述，这只会切换参数中指定的css类。也就是说，如果您调用此方法的元素具有类open，则将删除该类。如果他们没有班级open，他们将获得css课程。

toggleClass：这个CSS如何工作？

2 个答案: