#优质博文 #前端 #vue #动画
The Magic in Shiki Magic Move

【这个代码块过渡动画太酷啦！】

AI 摘要：这篇文章介绍了 Shiki Magic Move 的原理和实现方法。Shiki Magic Move 是一个用于代码块动画过渡的工具，灵感来自 Keynote 的 Magic Move 功能。文章详细解释了如何使用 Shiki 和 Vue 的 <TransitionGroup> 组件实现代码块中单词（token）的平滑过渡，包括进入（Enter）、移动（Move）和离开（Leave）三种动画效果。为了解决动画中遇到的挑战，作者采用了文本差异算法来精确匹配变化前后的 token，以及开发了一个自定义渲染器来处理特定的动画效果。Shiki Magic Move 已开源，鼓励社区为不同框架贡献更多集成。

via Anthony Fu