SVG CSS-transition 在所有动画之后开始

Question

您好，我在 google chrome 浏览器中遇到问题，我不知道如何解决 问题：svg 转换在 A 标签和 SPAN 标签转换完成后开始， 我在 IE 11 中测试过，但那里似乎没有问题

我希望所有的过渡都从一个点开始，然后一起结束，因为我给了它们所有 0.15 秒的时间段。

我的代码：

#mainNav {
  height: 42px;
  background-color: #f5f5f5;
}

#mainNav * {
  transition: all 0.15s ease-out;
}

#mainNav > a {
  display: inline-block;
  height: 100%;
  position: relative;
  font: 13px/42px "IranYekanWebLight";
  font-weight: 700;
  color: #575757;
  overflow: hidden;
}

#mainNav > a:hover {
  background-color: #ddd;
}

#mainNav > a:hover span {
  font-size: 17px;
  padding-right: 55px;
}

#mainNav > a:hover svg {
  left: 35%;
  fill: #fff;
}

#mainNav span {
  padding: 0 30px;
  position: relative;
  z-index: 1;
}

#mainNav svg {
  height: 90px;
  position: absolute;
  bottom: -90%;
  left: 10%;
  fill: #e3e3e3;
  z-index: 0;
}

#mainNav > a.aqua {
  border-top: 4px solid #1cbbb4;
}

<nav id="mainNav">
    <a class="aqua" href="#">
      <span>خانه</span>
      <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 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
        <g>
          <g>
            <g>
              <path d="M26,26.4H14c-0.8,0-1.5-0.7-1.5-1.5v-5c0-0.3-0.2-0.5-0.5-0.5h-1c-0.2,0-0.4-0.1-0.5-0.3c-0.1-0.2,0-0.4,0.2-0.6l8.4-6.5
                c0.5-0.4,1.3-0.4,1.8,0l8.4,6.5c0.2,0.1,0.2,0.4,0.2,0.6c-0.1,0.2-0.3,0.3-0.5,0.3h-1c-0.3,0-0.5,0.2-0.5,0.5v5
                C27.5,25.7,26.8,26.4,26,26.4z M12.4,18.4c0.6,0.2,1.1,0.8,1.1,1.4v5c0,0.3,0.2,0.5,0.5,0.5h12c0.3,0,0.5-0.2,0.5-0.5v-5
                c0-0.7,0.5-1.3,1.1-1.4l-7.3-5.7c-0.2-0.1-0.4-0.1-0.6,0L12.4,18.4z"/>
            </g>
            <g>
              <path d="M21.5,25.9v-5c0-0.3-0.2-0.5-0.5-0.5h-2c-0.3,0-0.5,0.2-0.5,0.5v5h-1v-5c0-0.8,0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5
                v5H21.5z"/>
            </g>
          </g>
        </g>
      </svg>
    </a>
</nav>

Answer 1

我想我知道你的代码有什么问题。您将转换应用到 #mainNav 的每个子节点，而您只想为 svg 而不是它的每个子节点设置动画。

您可以将选择器更改为：

#mainNav a > * {
  transition: all 0.15s ease-out;
}