View Transition实现列表倒序动画实例页面

CSS代码：

ul {
    display: flex;
}
ul.reverse {
    flex-direction: row-reverse;
}

HTML代码：

<h4 class="fill">DOM位置调整</h4>
<ul id="ul">
    <li style="view-transition-name: li-1">1</li>
    <li style="view-transition-name: li-2">2</li>
    <li style="view-transition-name: li-3">3</li>
    <li style="view-transition-name: li-4">4</li>
</ul>

<h4 class="fill">CSS属性调整</h4>
<ul id="ul2">
    <li style="view-transition-name: li-5">1</li>
    <li style="view-transition-name: li-6">2</li>
    <li style="view-transition-name: li-7">3</li>
    <li style="view-transition-name: li-8">4</li>
</ul>

<button id="button">点击水平倒序呈现</button>

JS代码：

button.onclick = function () {
    document.startViewTransition(() => {
        [...ul.children].reverse().forEach(child => {
            ul.append(child);
        });
        
        ul2.classList.toggle('reverse');
    }); 
};