Trying to animate a button in polymer

Question

I'm trying to implement a button animation from "hamburger" to an X.

Here's the code I'm using:

CSS:

* {
  margin: 0;
  padding: 0;
}

/* Icon 1 */

 #nav-icon2 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}


/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #d3531a;
  opacity: 1;
  -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;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

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

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

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 36px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

#nav-icon2.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 5px;
  top: 29px;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}

HTML:

JS:

Polymer({
  is: "flip-button",

  flip: function() {
    console.log("here");
    console.log(this.classList.contains("open"));
    this.classList.toggle("open");
  }
});

In the console, I can see the logs I put in. I also checked the elements, and I can see the open class going on and off, but no animation. Why?

tony19 · Accepted Answer

The problem is you're applying the open class to the Polymer element itself (i.e., this.classList.toggle('open'), where this is the Polymer element), while the animation's CSS selector is targeting nav-icon2 (i.e., #nav-icon2.open).

The quickest fix is to apply the class to nav-icon2 (via automatic node finding):

// this.classList.toggle("open");  // DON'T DO THIS

this.$['nav-icon2'].classList.toggle("open");

HTMLImports.whenReady(() => {
  Polymer({
    is: "flip-button",

    flip: function() {
      console.log("here");
      console.log(this.classList.contains("open"));
      this.$['nav-icon2'].classList.toggle("open");
    }
  });
});

codepen

Trying to animate a button in polymer

Answers (1)

Related Questions