Question

我使用：nth-chid（1），2和3定位SVG rect并制作了一个 - ＆gt;我试图点击时触发。不知道我在这里做错了什么。任何帮助都会非常感谢你！

＆＃13;

(function() {
  var burger;

  buger = document.getElementById('burger');

  burger.addEventListener('click', function() {
    console.log('you cliked the burger');
    return burger.classList.toggle('st0-active');
  });

}).call(this);

＆＃13;

body {
  max-width: 900px;
  margin: 0 auto;
}

.st0-active:nth-child(1) {
  -webkit-transform: rotate(27deg) translate(23px, -51px);
          transform: rotate(27deg) translate(23px, -51px);
  fill: #000;
}
.st0-active:nth-child(2) {
  fill: #000;
}
.st0-active:nth-child(3) {
  -webkit-transform: rotate(-21deg) translate(-48px, 15px);
          transform: rotate(-21deg) translate(-48px, 15px);
  fill: #000;
}

＆＃13;

<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
	<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
	<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
	<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
  
</body>

＆＃13;

这是我设计的最终目标的图片

我使用CSS Transforms并使用nth-child定位rect的原因以下是我目前正在处理的codepen的链接 enter link description here

Answer 1

＆＃13;

(function() {
  var burger;

  burger = document.getElementById('burger');

  burger.addEventListener('click', function() {
    console.log('you cliked the burger');
    return burger.classList.toggle('st0-active');
  });

}).call(this);

＆＃13;

body {
  max-width: 900px;
  margin: 0 auto;
}
#burger > g > rect{
  transition: transform 1s;
}

.st0-active > g > rect:nth-child(1) {
  -webkit-transform: rotate(27deg) translate(23px, -51px);
      transform: rotate(27deg) translate(23px, -51px);
  fill: #000;
}
.st0-active > g > rect:nth-child(2) {
  fill: #000;
}
.st0-active > g > rect:nth-child(3) {
  -webkit-transform: rotate(-21deg) translate(-48px, 15px);
      transform: rotate(-21deg) translate(-48px, 15px);
  fill: #000;
}

＆＃13;

<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
	<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
	<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
	<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
  
</body>

＆＃13;

尝试添加此代码。

#burger{
  transition: transform 1s;
}

此外

CSS3过渡允许您在给定的持续时间内平滑地（从一个值到另一个值）更改属性值。

点击

1 个答案: