试图在聚合物中设置按钮动画

时间：2017-02-28 18:31:47

标签： javascript css animation polymer polymer-1.0

我正在尝试将“hamburger”中的按钮动画实现为X.

这是我正在使用的代码：

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：

<div on-tap="flip" id="nav-icon2">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

JS：

Polymer({
  is: "flip-button",

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

在控制台中，我可以看到我输入的日志。我还检查了元素，我可以看到open类开启和关闭，但没有动画。为什么呢？

1 个答案:

答案 0 :(得分：2)

问题是你是将this.classList.toggle('open')类应用于Polymer元素本身（即this，其中nav-icon2是Polymer元素），而动画的CSS选择器是目标#nav-icon2.open（即nav-icon2）。

最快的解决方法是将课程应用到// this.classList.toggle("open"); // DON'T DO THIS this.$['nav-icon2'].classList.toggle("open"); （通过automatic node finding）：

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

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

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <flip-button></flip-button>

  <dom-module id="flip-button">
    <template>
      <style>
        * {
          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;
        }
      </style>
      <div on-tap="flip" id="nav-icon2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </template>
  </dom-module>
</body>
@media (max-width: 600px) {
  #tabmiddle {
    height: 1500px;
  }
}

codepen

相关问题
最新问题