有一个特定的代码:

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

必须制作一个动画，使按钮一个接一个地以不透明度显示

问题是我不能“理解”类按钮组。 因此，此迭代不起作用：（因为它枚举char)

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

我尝试在手写笔中完成，但在手写笔中需要指定“child”的数量，所以不是这样（或者可能有解决方案，但由于经验不足，我没有看到这样的功能）。

---

顺晟科技：

这可以用CSS完成。

每个按钮都有一个动画，它在一段时间内从不透明度0不透明度1开始（在此片段中使用0.3秒）。但是，每个按钮的动画延迟了一个量，这个量取决于它的子位置，它被设置为CSS变量--n

谢谢你的回答。 因此，我回答了我的问题--不，C#中的自定义动画目前不可能实现，只能实现js.

在JS中编写代码以解决此问题:

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

CSS:

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

这是@A Haworth的回答，但是部分是动态构建在文件中的，而不是硬设置在文件中。

通常不建议在Blazor标记中包含样式，因为它将重建每个加载，而不是缓存，我个人也不会这么做--但老实说，这只是几个字节，并不会造成任何损害。

buttons.css（链接它）

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>

DynamicButtons.razor

<div class="button-group">
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
    <button class="button"></button>
</div>