饿了么面试官：实现一下 Element-UI 官网的主题切换动画！

文章预览

前端私教训练营：1v1私教，终身辅导计划，帮你拿到满意的  offer 。  已帮助数百位同学拿到了中大厂  offer 前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 最近看到 ElementPlus 官网上的切换主题方式非常有趣，这是一个过渡的动画效果 所以在网上查了一番，找到基本的实现方法 实现 基本效果 首先我们起一个 html 文件，写一个按钮，以及简单的背景颜色切换，来模拟主题的切换 可以看到实现了最简单的主题切换效果 document.startViewTransition 想要实现过渡效果，需要先用到一个 JavaScript 的原生方法： document.startViewTransition 这个方法是用来做动画过渡效果的 通过调用 API，让浏览器为新旧两种不同视图分别捕获并建立了快照 (即  ::view-transition-old(root) 旧快照 和  ::view-transition-new(root)  新快照) ………………………………