介绍一个Web前端新特性，分分钟实现高难度的DOM排序...

分分钟实现高难度的排序/删除动画。

张鑫旭。

1. 继续分享新特性，这次介绍的新特性可以让大家分分钟实现高难度的排序或删除动画，像这样的动画效果，顺序一改变所有元素都会以动画的方式回到变化之后的位置，或者删除动画中删除的元素会淡出，同时后面的元素会移上去替补位置。

2. 对于这样的动画效果如果是你，会如何实现？估计大家都会思考好一会，也有人可能会觉得有难度。实际上实现这样的效果非常简单，只需两步：

- 第一步：给所有列表元素设置不重复的 view-transition-name 值，就像这样。

- 第二步：只要在 DOM 排序或删除代码执行之前再运行一下 document.startViewTransition，这时就能实现想要的效果了。

3. 就是这么简单，就是这么 easy，over，一切全部结束。比如刚才删除动画，平常删除 DOM 元素可能会这样，dom.remove，此时就是干巴巴的消失，而要想让它有动画效果很简单，在这个方法里执行就有这样效果。

4. 当然现在都是 Vue、React 这种数据驱动的开发框架占主流，同样适用。平常删除一个元素可能是这样，对数据进行过滤，这时列表会突然消失，用户可能都不知道删掉了哪个。此时只需在前面加一个 document.startViewTransition，再执行数据变化，就有刚才看到的动画效果。

5. 这个特性其实属于 ViewTransitions API 里的特性之一，这里面还有很多其他特性，这里不展开。这里介绍的是它最简单、最实用的一个特性，它的兼容性是这样。目前 Safari 和 Chrome 都已支持这个新特性，对于不支持的浏览器也不用担心渐进增强，如果浏览器不支持这个特性，那还是以前的效果，对用户没有任何影响。只要前面加一段 polyfill，保证代码执行不会出错就好，非常实用的装逼技术。

6. 你的 leader 可能以为效果实现起来非常考验技术，实际上就这两行代码的事，非常实用。

7. 就这些，记得关注，每周都会有新特性更新。