Question

我目前正在尝试停止具有动画的组g中一个孩子的动画。

所以我试图隔离孩子，给他一个css类来停止动画，但是他似乎忽略了它，并给了他父亲的课特权。

是否有可能强迫孩子不上父亲的特定班级？

.pulsBlockly {
    animation: pulsBlockly 1s ease-out 0s infinite alternate;
    opacity: 1.0;
}

@keyframes pulsBlockly {
    0%   { opacity: 0.4; }
    100% { opacity: 0.1 }
}

.nopulsBlockly {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
}

<svg>
  <g class="pulsBlockly">
    <g class="nopulsBlockly">
      <rect rx="4" ry="4" x="-5" y="0" height="16" width="27.35" fill="gold"></rect> 
      <text class="blocklyText" y="12.5">&nbsp;∅&nbsp;</text>
    </g>
  </g>
<svg>

按预期，第一组g会按照我的意愿进行动画处理，但是第二组g会在我不希望的时候闪烁。

Answer 1

opacity属性与大多数其他属性不同。它不会继承到子元素。相反，它将导致创建一个以指定的不透明度绘制的隔离层。该层中的任何内容（例如该组的所有子级）都将受到该不透明度的影响。您无法做任何事情来解决这个问题。

如果您有一组动画化的东西，并且您希望其中一些动画化，而另一些则没有。然后，您需要将动画分别应用于每个孩子。

例如，您可以使用CSS >（直接子级）组合器将动画移至每个子级。

/* Applies to any direct child of `pulsBlockly` */
.pulsBlockly > * {
    animation: pulsBlockly 1s ease-out 0s infinite alternate;
    opacity: 1.0;
}

如果执行此操作，则孩子的nopulsBlockly类将取消其动画。

.pulsBlockly > * {
    animation: pulsBlockly 1s ease-out 0s infinite alternate;
    opacity: 1.0;
}

@keyframes pulsBlockly {
    0%   { opacity: 0.4; }
    100% { opacity: 0.1 }
}

.nopulsBlockly {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
}

<svg>
  <g class="pulsBlockly">

    <g><!-- gets animated -->
      <rect rx="4" ry="4" x="-5" y="0" height="16" width="27.35" fill="gold"></rect> 
      <text class="blocklyText" y="12.5">&nbsp;∅&nbsp;</text>
    </g>

    <g class="nopulsBlockly" transform="translate(40,0)"> <!-- nopulsBlockly blocks the animation this time -->
      <rect rx="4" ry="4" x="-5" y="0" height="16" width="27.35" fill="gold"></rect> 
      <text class="blocklyText" y="12.5">&nbsp;∅&nbsp;</text>
    </g>
  </g>
<svg>

如何停止G组SVG中一个孩子的动画？

1 个答案: