前言
路同事: Element Plus上面暗黑动画效果怎么实现的。
我：我看了一眼动画效果，然后说大概是通过clipPath,然后复刻了半天也没有完全复刻出来，只能去看一下Element Plus doc源码。
动画效果展示
切换到暗黑模式的时候，是黑色逐渐放大,亮色逐渐缩小。 切换到亮色模式的时候,是雷瑟逐渐缩小,亮色逐渐放大。
原理解析
- 放大/缩小效果通过clipPaht切割实现。
- 黑色/白色同时存在通过伪元素：view-transition-old/view-transition-new
- 通过叠加(z-index)黑色/白色层实现黑色渐变白色或者白色渐变成黑色
代码
不过其中的效果换成了从左到右渐变效果
