toggleClass：这个 CSS 是如何工作的？答案

【问题标题】：toggleClass: How does this CSS work?toggleClass：这个 CSS 是如何工作的？
【发布时间】：2016-09-14 18:33:09
【问题描述】：

我正在使用以下动画（用 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('open')，但open到底是什么？它是导航图标的子类吗？如果可以使用 ember，是否只需在两个 CSS 块（打开和未打开）之间切换显示动画？

【问题讨论】：

标签： jquery html css animation ember.js

【解决方案1】：

toggleClass('open') 将“open”类添加/删除到 div。当 '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; 才能使动画在所有子跨度元素上发生。

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

【讨论】：

伟大而全面的答案

【解决方案2】：

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

【讨论】：