How to iterate HTML code with foreach and make animation?-CodePudding

There is a certain code:

<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>

It is necessary to make an animation so that the buttons appear by opacity one after the other

The problem is that I can't "catch on" to class button-group. Therefore, this iteration does not work: (because it enumerates char)

@foreach (var i in "button-group")
{
    @i
}

I tried to do it in Stylus, but there you need to specify the number of "child", so it's not that (or maybe there is a solution, but due to low experience I did not see such functionality).

CodePudding user response：

This can be done just with CSS.

Each button has an animation which takes it from opacity 0 opacity 1 over a period (0.3s is used in this snippet). Each button's animation is delayed though by an amount that is calculated depending on its child position which is set as a CSS variable --n

.button-group button {
  animation: show 0.3s linear forwards;
  animation-delay: calc((var(--n) - 1) * 0.3s);
  opacity: 0;
}

.button-group button:nth-child(1) {
  --n: 1;
}

.button-group button:nth-child(2) {
  --n: 2;
}

.button-group button:nth-child(3) {
  --n: 3;
}

.button-group button:nth-child(4) {
  --n: 4;
}

.button-group button:nth-child(5) {
  --n: 5;
}

.button-group button:nth-child(6) {
  --n: 6;
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<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>

CodePudding user response：

This is @A Haworth's answer, but with the nth-child part of the style section built dynamically in the .razor file rather than hard-set in the .css file.

It's not usually recommended to include style in Blazor markup, as it will rebuild every load instead of caching, and I personally wouldn't do it-- but to be honest, it's only a few bytes, and it's really not going to hurt anything.

buttons.css (link it)

.button-group button {
    animation: show 0.3s linear forwards;
    animation-delay: calc((var(--n) - 1) * 0.3s);
    opacity: 0;
}
@keyframes show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

DynamicButtons.razor

<style>
    @((MarkupString)btnString)
</style>
<div class="button-group">
    @for (int i = 1; i <= btnCounter; i  )
    {
        <button>@i</button>
    }
</div>

@code {
    int btnCounter = 20; // This can be whatever you want.
    string btnString = "";

    protected override void OnInitialized()
    {
        for (int i = 1; i <= btnCounter; i  )
        {
            btnString  = ".button-group button:nth-child("   i   ") { --n: "   i   ";}  ";
        }
    }
}

CodePudding user response：

try it with jquery:

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


.button-group button {
   opacity:0;
  }

$('.button-group button').each(function(index){ 
    $(this).delay( index*100 ).animate({
            opacity: "1"
        });
 });