David Ferris David Ferris - 2 months ago 26
HTML Question

toggleClass: How does this CSS work?

I am using the following animations (reimplemented with Ember JS), but failing to understanding how this CSS works. Refer to the link below.

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


toggleClass('open') is triggered when the div is clicked, but what is
open
actually? Is it a subclass of nav-icon? And if it is possible with ember, would simply toggling between the two CSS blocks (open and not) show the animation?

Answer

toggleClass('open') adds/removes the class 'open' to the div. When 'open' is added to the div, each span element inside of the div is changed in a different way through the pseudo nth-child() . The full CSS for #nav-icon3 is here:

/* 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%;
}

The transition is set on all span elements inside of the icons in the following code. It is necessary to have the transition: .25s ease-in-out; present in order for the animation to occur on all of the child span elements.

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