可以在关键帧中设置子元素的属性吗

Posted 2023-03-05

技术标签:

【中文标题】可以在关键帧中设置子元素的属性吗【英文标题】：Can a property of a child element be set in a keyframe 【发布时间】：2014-12-21 21:34:12 【问题描述】：

我已经使用 @keyframes 成功地为 div 设置了动画，但我需要同时更改该 div 的子元素的属性。有没有办法从关键帧中处理子元素？

html

<div class="layoutBlocks" id="layoutBlock1">
    <div class="Wrappers">
      <div class="transparentBG"> <!--semi=transparent underlay-->
    </div>
</div>
<div class="Wrappers">
    <div class="articles" id="article1">
        <table>
            <tr><th>heading</th></tr>
            <tr><td>article</td></tr>
        </table>
    </div>
</div>

CSS

#layoutBlock1 
    left: 0%;
    top: 0%;
    width: 49.75%;
    height: 49.25%;
    -webkit-animation: LlB1 1s;
    animation: LlB1 1s;


@-webkit-keyframes LlB1 
    0%   width:50%; height:50%; z-index: 1;
    100% width:100%; height:100%; z-index: 100;

@keyframes LlB1 
    0%   width:50; height:50%; z-index: 1;
    100% width:100%; height:100%; z-index: 100;

（所有额外的包装都是为了让半透明背景和圆角在 android 上工作。）

（我认为这里的变换可能比关键帧更容易，但我的最终目标是添加更多效果。）

当我的关键帧移动和调整 layoutBlock1 div 的大小时，我想让半透明的底层不透明，但由于它是一个子元素，我不知道如何解决它。这可能吗？

【问题讨论】：

我的复制粘贴有点草率... layoutBlock1 的宽度和高度是 50%，而不是 49.whatever 基本上...不！动画适用于它们所附加的元素。它们不能直接影响其他元素的属性。你能不能同时让孩子和父母一起制作动画？ 【参考方案1】：

从关键帧寻址子节点是不可能的。

但是，可能会有一些黑客：

拥有另一个具有相同持续时间的动画，但具有子节点的动画和设置实现此目的的另一种方法是使用一些 JS 库来制作动画。例如：https://animejs.com

【讨论】：

【参考方案2】：

您不能从关键帧中更改子元素，除非该关键帧已在该元素上调用。您可以制作另一个动画，您可以将其分配给子元素并将其设置为具有相同的持续时间。

如果您希望子元素发生相同的动画，您只需调用子元素上的关键帧即可。