View Transition实现DOM移除淡出动画实例页面

回到相关文章 »

效果：

1
2
3
4

代码：

CSS代码：

/* 无关紧要，略…… */

HTML代码：

<ul>
    <li style="view-transition-name: li-1">1 <button>×</button></li>
    <li style="view-transition-name: li-2">2 <button>×</button></li>
    <li style="view-transition-name: li-3">3 <button>×</button></li>
    <li style="view-transition-name: li-4">4 <button>×</button></li>
</ul>

JS代码：

const buttons = document.querySelectorAll('button');
[...buttons].forEach(button => {
    button.onclick = function () {
        document.startViewTransition(() => {
            this.closest('li').remove();
        });     
    };    
});