Trigger View Transition CSS Transitions View-Transitions

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis quis magni deserunt fugiat explicabo doloribus, necessitatibus expedita at dolor numquam maxime quae, ut ea repellendus alias accusamus soluta fugit!
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis quis magni deserunt fugiat explicabo doloribus, necessitatibus expedita at dolor numquam maxime quae, ut ea repellendus alias accusamus soluta fugit!
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis quis magni deserunt fugiat explicabo doloribus, necessitatibus expedita at dolor numquam maxime quae, ut ea repellendus alias accusamus soluta fugit!
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis quis magni deserunt fugiat explicabo doloribus, necessitatibus expedita at dolor numquam maxime quae, ut ea repellendus alias accusamus soluta fugit!
5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis quis magni deserunt fugiat explicabo doloribus, necessitatibus expedita at dolor numquam maxime quae, ut ea repellendus alias accusamus soluta fugit!

Staggered View Transitions

This is an attempt at staggering the view-transitions on a list.

After some experimentation there are two possible options.

1. use a custom animation-delay for each item.

<li style="view-transition-name: list-1">...</li>
<li style="view-transition-name: list-2">...</li>
<li style="view-transition-name: list-3">...</li>
<li style="view-transition-name: list-4">...</li>
<li style="view-transition-name: list-5">...</li>

li {
    view-transition-class: list-item;
}

html::view-transition-group(.list-item) {
    animation-duration: calc(var(--delay) * 300ms);
}

html::view-transition-group(list-1) {
    --delay: 0;
}

html::view-transition-group(list-2) {
    --delay: 1;
}

html::view-transition-group(list-3) {
    --delay: 2;
}

html::view-transition-group(list-4) {
    --delay: 3;
}

html::view-transition-group(list-5) {
    --delay: 4;
}

2. The second option is to use transition-durations and thus avoid the animation-duration.

li {
    view-transition-class: list-item;

    transition-duration: calc(var(--delay) * 300ms);

    &:nth-child(1) {
        ---delay: 0;
    }

    &:nth-child(2) {
        --delay: 1;
    }

    &:nth-child(3) {
        --delay: 2;
    }

    &:nth-child(4) {
        --delay: 3;
    }

    &:nth-child(5) {
        --delay: 4;
    }
}

Chris Coyier on Frontend Masters blog had similar findings. View Transitions Staggering